Vue中TodoLists案例_底部交互

与上一篇Vue中TodoList案例_底部统计有俩个文件变化了

App.vue:定义了一个方法checkAllTodo,实现全选和取消全选,并将方法传给儿子组件MyFooter






MyFooter.vue:使用props接收checkAllTodo方法,并且定义一个change改变事件,触发checkAll方法将参数通过checkAllTo传给App.vue,这里的(e.target.checked)值为true或false






效果:全选、取消全选

Vue中TodoLists案例_底部交互_第1张图片

Vue中TodoLists案例_底部交互_第2张图片

 改良:

App.vue:清除所有已经完成的任务,定义clearAllTodo函数传给儿子组件MyFooter






MyFooter.vue:改良全选取消全选(v-model绑定isAll函数,利用其中set()get()方法进行操作)。定义点击事件clearAll调用clearAllTodo






 Vue中TodoLists案例_底部交互_第3张图片

你可能感兴趣的:(linerVue,vue.js,交互,css)