css与js练习（2）

vue练习记录(js/css）2

参照cn.vuejs.org/v2/examples…

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"
         />
   
         <div style="margin-left: 462px">
           <!-- 全部的 -->
           <ul class="ulsy" v-show="alshow == 1">
             <li
               v-for="(item, index) in list"
               :class="item.isCheck ? 'end' : 'start'"
               :key="index"
             >
               <input
                 type="checkbox"
                 class="chesy"
                 :checked="item.isCheck"
                 @change="check(item)"
               />
               {{ item.msg }}
               <button @click="del(index)">×</button>
             </li>
           </ul>
           <!-- 完成 -->
           <ul class="ulsy" v-show="alshow == 2">
             <li
               v-for="(item, index) in endList"
               :class="item.isCheck ? 'end' : 'start'"
               :key="index"
             >
               <input
                 type="checkbox"
                 class="chesy"
                 :checked="item.isCheck"
                 @change="check(item)"
               />
               {{ item.msg }}
               <button @click="del(index)">×</button>
             </li>
           </ul>
           <!-- 未完成 -->
           <ul class="ulsy" v-show="alshow == 3">
             <li
               v-for="(item, index) in startList"
               :class="item.isCheck ? 'end' : 'start'"
               :key="index"
             >
               <input
                 type="checkbox"
                 class="chesy"
                 :checked="item.isCheck"
                 @change="check(item)"
               />
               {{ item.msg }}
               <button @click="del(index)">×</button>
             </li>
           </ul>
         </div>
         <div
           v-if="show"
           style="
             display: inline-flex;
             justify-content: space-around;
             width: 400px;
           "
         >
           <button @click="allsele">全部完成</button>
           <button @click="allcan">全部未完成</button>
           <button @click="allshow">展示全部</button>
           <button @click="allsuc">展示已完成</button>
           <button @click="allno">展示未完成</button>
         </div>
       </div>
     </div>
   </template>
   
   <script>
   export default {
     name: "App",
     data() {
       return {
         msg: null,
         show: false,
         list: [], //  全部
         endList: [], // 完成
         startList: [], // 未完成
         alshow: 1, // 1 全部 2 完成  3 未完成
       };
     },
     methods: {
       getmsg() {
         this.show = true;
         console.log("成功插入数据");
         this.list.push({
           msg: this.msg,
           isCheck: false,
         });
         this.msg = "";
       },
       check(item) {
         item.isCheck = !item.isCheck;
         console.log(item.isCheck);
       },
       del(index) {
         this.list.splice(index, 1);
       },
       allsele() {
         for (var i = 0; i < this.list.length; i++) {
           this.list[i].isCheck = true;
           console.log(this.list[i]);
         }
       },
       //
       allcan() {
         for(var i = 0; i < this.list.length ; i++){
           // this.list.item.isCheck = true;
           this.list[i].isCheck = false
           console.log(this.list[i])
         }
       },
       allshow() {
         for (var i = 0; i < this.list.length; i++) {
           if (this.list[i] != null) {
             this.alshow = true;
             console.log(this.list);
           }
         }
       },
       allsuc() {
         this.alshow = 2;
         const end = [];
         this.list.forEach((item) => {
           if (item.isCheck) {
             end.push(item);
           }
         });
         this.endList = end;
       },
       // 全部未完成的按钮的事件
       allno() {
         this.alshow = 3;
         const start = [];
         this.list.forEach((item) => {
           if (!item.isCheck) {
             start.push(item);
           }
         });
         this.startList = start;
         console.log("----");
         console.log(this.alshow);
       },
     },
     computed: {},
   };
   </script>
   <style lang="less">
   #app {
     font-family: "Avenir", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   .head {
     color: #e9e;
   }
   .content {
     .searchinp {
       width: 400px;
       height: 50px;
       padding-left: 20px;
       font-size: 20px;
       border-style: solid;
       border-color: pink;
       color: plum;
     }
     input[type="text"]:focus {
       outline: none;
       border: 2px solid rgb(100, 167, 184);
     }
     input[type="text"]::placeholder {
       color: lightblue;
       opacity: 0.5;
       font-size: 20px;
     }
     .ulsy {
       margin: 0;
       list-style: none;
       padding-left: 24px;
       width: 400px;
       border: 1px solid #ddd;
       li {
         height: 30px;
         line-height: 30px;
       }
       .end {
         color: plum;
         text-decoration: line-through;
       }
       .start {
         color: wheat;
       }
     }
   }
   </style>