关于代码拆分
来源:6-7 使用 Composition API 开发TodoList(2)

FanYiyang
2021-01-15
`// input狂输入item
const inputValueChange = () => {
const { ref } = Vue
const todoItem = ref(’’)
const handleInputValue = (e) => {
todoItem.value = e.target.value
}
return {
todoItem,
handleInputValue
}
}
// 添加item
const listAddTodoList = () => {
const { reactive } = Vue
const list = reactive([])
const addItemList = (item) => {
list.push(item)
}
return {
list,
addItemList
}
}
// 创建实例
const app = Vue.createApp({
setup() {
const { todoItem, handleInputValue } = inputValueChange()
const { list, addItemList } = listAddTodoList()
return {
todoItem, handleInputValue,
list, addItemList
}
},
template: <div> <input :value="todoItem" @input="handleInputValue"/> <button @click="() => addItemList(todoItem)">添加</button> </div> <ul> <li v-for="(item, index) of list"> {{item}} </li> </ul>
,
}).mount(’#root’)`
老师,就是每次点击确定按钮后我需要清空input里面的值,但是我的点击方法是放置在listAddTodoList函数中的,请问下如何去清空todoItem的值呢?
1回答
-
listAddTodoList 导出这个方法,然后在主文件引用这个方法,再导出给模版去调用
132021-01-18
相似问题