css与js练习(2)
vue练习记录(js/css)2
参照https://cn.vuejs.org/v2/examples/todomvc.html的功能
js控制checkbox或li元素的显示或隐藏
-
选中全部
-
取消全选
-
全部显示
-
已选中显示
-
未选中显示
-
方法总结
-
input为checkbox类型时,改变其状态用@change;绑定点击状态为:checked;
-
选中全部——所有的isCheck为true;取消全选——所有为false;全部显示——显示为true;
-
项目有三个ul,点击按钮进行切换,v-show的alshow有三个值,其中1-全部、2-完成、3-未完成,再新建两个数组(endlist、startlist)进行完成和未完成的数据存储,其中是从对list的遍历得到的
-
遍历——forEach方法
-
this.list.forEach((item) => { if(){} })
-
-
-
总代码
<!-- 功能:任务清单管理 时间:2021年07月06日 10:12:01 版本:v1.0 修改记录: 修改内容: --> <template> <div id="app"> <div class="head"> <h1>这是一个todomvc练习</h1> </div> <div class="content"> <input type="text" class="searchinp" placeholder="现在需要干嘛" @keyup.enter="getmsg()" v-model="msg" />