list vue 删除后页面渲染_vue渲染列表，实现添加，删除，修改功能

html页面布局：

引用bootstrap.css,vue.js,axios.js, todo.js

TodoList

.del{text-decoration: line-through;color: #ccc}

要完成的{{count}}件事

• {{todo.title}}

  ×

todo.js

todo.js :包含json数据以及添加数据，修改数据，删除数据let vm = new Vue({

el:"#app",

data:{

todos:[

{isSelected:false,title:'吃饭'},

{isSelected:false,title:'睡觉'},

{isSelected:false,title:'打豆豆'},

],

title:'',

cur:''

},

created(){//从本地存储中获取数据

this.todos= JSON.parse(localStorage.getItem('data'))||this.todos;

},

watch:{

todos:{//wantch默认只做一层监控数据变化，深度监控

handler(){//默认写成函数

localStorage.setItem('data',JSON.stringify(this.todos))

},deep:true

}

},

directives:{

focus(el,bindings){

if(bindings.value){//点击当前li是让内部输入框获取焦点

el.focus();//获取焦点

}

}

},

methods:{

add(){

this.todos.push({

isSelected:false,

title:this.title

})

this.title=''

},

remember(todo){

this.cur = todo

},

cancel(){

this.cur=''

},

remove(todo){

this.todos=this.todos.filter(item =>item!==todo);

}

},

computed:{

count(){

return this.todos.filter(item =>!item.isSelected).length

}

}

})