在自制一个能增删改的todolist练手,模仿www.todolist.cn,做到重新编辑todo内容时卡住了,在官方没总结出解决方案,所以在这里求助。以下。
点击文字变成input修改,但效果是这样的
因为我v-if绑定的是同一个变量,所以肯定会全局改掉,但对vue的理解太浅,想不到有效的办法。
代码:`
NBtodoList
Vue.component('my-li',{
props:['to','okto','childchecked','childisrevamp'],
template: '{{to}}{{okto}}
',
methods: {
childAddTodo: function(){
this.$emit('childAddTodo')
},
deltodo: function(){
this.$emit('deltodo');
},
todook: function(){
this.$emit('todook');
},
childrevamp: function(){
this.$emit('childrevamp');
}
}
})
Vue.component('my-h2',{
props: ['num','status'],
template: '{{status}}{{num}}
'
})
new Vue({
el: '#app',
data: {
todoText: '',
todoList: [],
okTodoText: '',
oktodoList: [],
noNum: 0,
okNum: 0,
checked: true,
isRevamp: true
},
methods: {
addTodo: function(){
this.todoText.trim() ? this.todoList.push((this.todoText).trim()) : alert('你输嘞不对~');
localStorage.notodo = JSON.stringify(this.todoList);
this.noNum = this.todoList.length;
this.todoText = '';
},
deltodos: function(index){
this.todoList.splice(index,1);
localStorage.notodo = JSON.stringify(this.todoList);
this.noNum = this.todoList.length;
},
deloktodos: function(index){
this.oktodoList.splice(index,1);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.okNum = this.oktodoList.length;
},
dotoDown: function(index){
this.oktodoList.push(this.todoList[index]);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.deltodos(index);
this.okNum = this.oktodoList.length;
},
dotoUp: function(index){
this.todoList.push(this.oktodoList[index]);
localStorage.notodo = JSON.stringify(this.todoList);
this.deloktodos(index);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.noNum = this.todoList.length;
},
revamp: function(){
this.isRevamp = !this.isRevamp;
}
},
created:function(){
this.todoList = localStorage.notodo ? JSON.parse(localStorage.notodo) : [];
this.oktodoList = localStorage.oktodo ? JSON.parse(localStorage.oktodo) : [];
this.noNum = this.todoList.length;
this.okNum = this.oktodoList.length;
}
})
`
有什么办法能够在触发revamp事件后只让当前的span隐藏,input显示呢?求大牛指教!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
这种方式会让所有的todo一起显示或隐藏,
要做到只针对某个todo 的话,你可以为每个todo添加一个isRevamp,然后变成:
但这就要求你的数据中一开始每个todo都包涵isRevamp,如果你想动态地添加,会比较麻烦一些,请看文档中有关“ 响应式原理”部分:https://cn.vuejs.org/v2/guide...
但有一个简单的处理方式:data中添加一个index变量,
大致是这样的:
很简单啊,给每个元素绑定一个状态变量就行了。