请选择 进入手机版 | 继续访问电脑版

湖南新梦想

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 64|回复: 0

任务列表案例vue

[复制链接]

55

主题

61

帖子

521

积分

高级会员

Rank: 4

积分
521
QQ
发表于 2022-8-15 11:06:28 | 显示全部楼层 |阅读模式
法一:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>任务列表</title>
  8.     <script src="js/vue.js"></script>
  9.     <style>
  10.         #app {
  11.             margin: 0% auto;
  12.             width: 600px;
  13.         }
  14.         
  15.         #div_text input {
  16.             border: none;
  17.             font-size: 16px;
  18.         }
  19.         
  20.         button {
  21.             margin: 10px;
  22.         }
  23.     </style>
  24. </head>

  25. <body>
  26.     <div id="app">
  27.         <h1>任务列表</h1>
  28.         任务总数:<span>{{zs}}</span>; 还有:<span>{{no}}</span> 未完成;【<a style="color: aqua;" @click="wc">完成</a>】

  29.         <div id="div_text">
  30.             <p v-for="(item, index) in items" :style="{display:item.zDisplay}">

  31.                 <input type="checkbox" @click="dj(item,index)">
  32.                 <input v-show="!item.active" type="text" name="" id="" :value="item.text">
  33.                 <span v-show="item.active" style="color: rgb(112, 104, 104);text-decoration:line-through;">{{item.text}}</span>
  34.             </p>
  35.         </div>

  36.         <input type="text" v-model="add">
  37.         <button @click="tj">添加</button>

  38.     </div>

  39.     <script>
  40.         let vm = new Vue({
  41.             el: '#app',
  42.             data: {
  43.                 add: '',
  44.                 zs: 0,
  45.                 no: 0,
  46.                 items: [{
  47.                     text: '设计产品原型',
  48.                     active: false,
  49.                     zDisplay: 'block'
  50.                 }, {
  51.                     text: 'UI设计',
  52.                     active: false,
  53.                     zDisplay: 'block'
  54.                 }, {
  55.                     text: '编写页面代码',
  56.                     active: false,
  57.                     zDisplay: 'block'
  58.                 }, {
  59.                     text: '编写js代码',
  60.                     active: false,
  61.                     zDisplay: 'block'
  62.                 }]
  63.             },

  64.             methods: {
  65.                 dj(item, index) {
  66.                     this.items[index].active = !this.items[index].active;

  67.                 },
  68.                 //添加
  69.                 tj() {
  70.                     if (this.add == "") {
  71.                         return;
  72.                     }
  73.                     this.items.push({
  74.                         text: this.add,
  75.                         active: false,
  76.                         zDisplay: 'block'
  77.                     })
  78.                 },
  79.                 //点击完成
  80.                 wc() {
  81.                     // 遍历 items 把所有的active 都置为false
  82.                     for (let i = 0; i < this.items.length; i++) {
  83.                         if (this.items[i].active == true) {
  84.                             this.items[i].zDisplay = 'none';
  85.                         }
  86.                     }
  87.                 }
  88.             },


  89.             mounted: function() {
  90.                 //定时器
  91.                 const timer = setInterval(() => {
  92.                     let no1 = 0; //未完成的起始值0
  93.                     let zs1 = 0;
  94.                     // 遍历 items 把所有的active 都置为false
  95.                     for (let i = 0; i < this.items.length; i++) {
  96.                         //未完成的就是active为false
  97.                         if (this.items[i].active == false) {
  98.                             no1++;
  99.                         }
  100.                         if (this.items[i].zDisplay.includes('block')) {
  101.                             zs1++;
  102.                         }
  103.                     }
  104.                     this.no = no1;
  105.                     this.zs = zs1;
  106.                 }, 100)
  107.             }
  108.         });
  109.     </script>
  110. </body>

  111. </html>
复制代码
法二:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>任务列表</title>
  6.     <script src="js/vue.js"></script>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         
  13.         #app {
  14.             width: 500px;
  15.             height: 300px;
  16.             margin: 50px auto;
  17.             border: 1px solid #000;
  18.         }
  19.         
  20.         p {
  21.             margin-top: 20px;
  22.             margin-bottom: 20px;
  23.         }
  24.         
  25.         ul li {
  26.             list-style: none;
  27.         }
  28.         
  29.         .bk {
  30.             border: none;
  31.         }
  32.         
  33.         .xianshi {
  34.             text-decoration: line-through;
  35.             color: #999;
  36.             font-size: 16px;
  37.         }
  38.     </style>
  39. </head>

  40. <body>
  41.     <div id="app">
  42.         <h2>任务列表</h2>
  43.         <p>
  44.             任务总数:{{arr.length}};还有:{{choose()}} 未完成;【<span @click="finish()">完成</span>】
  45.         </p>
  46.         <ul>
  47.             <li v-for="(item,index) in arr">
  48.                 <input type="checkbox" @click="dj(item)" :checked="item.isxz" />
  49.                 <span v-show="item.isxz" class="xianshi">{{item.name}}</span>
  50.                 <input type="text" class="bk" v-model="item.name" v-show="!item.isxz">
  51.             </li>
  52.         </ul>
  53.         <p>
  54.             <input type="text" v-model="msg" />
  55.             <input type="button" @click="add" value="添加" />
  56.         </p>
  57.     </div>
  58.     <script>
  59.         var vm = new Vue({
  60.             el: "#app",
  61.             data: {
  62.                 msg: "",
  63.                 arr: [{
  64.                     name: "设计产品原型",
  65.                     isxz: false
  66.                 }, {
  67.                     name: "UI设计",
  68.                     isxz: false
  69.                 }, {
  70.                     name: "编写页面代码",
  71.                     isxz: false
  72.                 }, {
  73.                     name: "编写js代码",
  74.                     isxz: false
  75.                 }, ]
  76.             },
  77.             methods: {
  78.                 dj(item) {
  79.                     item.isxz = !item.isxz;
  80.                 },
  81.                 // 添加
  82.                 add() {
  83.                     if (this.msg == "") {
  84.                         return;
  85.                     }
  86.                     this.arr.push({
  87.                         name: this.msg,
  88.                         isxz: false
  89.                     });
  90.                     // 清空输入框
  91.                     this.msg = "";
  92.                 },
  93.                 // 还有几个
  94.                 choose() {
  95.                     //找 数组中 isxz 为false
  96.                     let num = 0;
  97.                     for (let i = 0; i < this.arr.length; i++) {
  98.                         //找 数组中 isxz 为false
  99.                         if (!this.arr[i].isxz) {
  100.                             num++;
  101.                         }
  102.                     }
  103.                     return num;
  104.                 },
  105.                 // 找出 isxz为false的留下来
  106.                 finish() {
  107.                     var temp = this.arr; // 把老数组存起来
  108.                     this.arr = [];
  109.                     for (let i = 0; i < temp.length; i++) {
  110.                         //找 数组中 isxz 为false
  111.                         if (!temp[i].isxz) {
  112.                             this.arr.push({
  113.                                 name: temp[i].name,
  114.                                 isxz: false
  115.                             });
  116.                         }
  117.                     }
  118.                 }
  119.             }
  120.         });
  121.     </script>
  122. </body>

  123. </html>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|湖南新梦想 ( 湘ICP备18019834号-2 )

GMT+8, 2022-10-3 13:45 , Processed in 0.041152 second(s), 20 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表