vue练习记录(js/css）

css与js练习（2）

vue练习记录(js/css）2

参照https://cn.vuejs.org/v2/examples/todomvc.html的功能

js控制checkbox或li元素的显示或隐藏

1. 选中全部

2. 取消全选

3. 全部显示

4. 已选中显示

5. 未选中显示

6. 方法总结

   • input为checkbox类型时，改变其状态用@change；绑定点击状态为:checked；

   • 选中全部——所有的isCheck为true；取消全选——所有为false；全部显示——显示为true；

   • 项目有三个ul，点击按钮进行切换，v-show的alshow有三个值，其中1-全部、2-完成、3-未完成，再新建两个数组（endlist、startlist）进行完成和未完成的数据存储，其中是从对list的遍历得到的

   • 遍历——forEach方法

     • this.list.forEach((item) => {
       	if(){}
       })
       

7. 总代码

   <!--
     功能：任务清单管理
     时间：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"
         />