利用Vue制作TodiList

置顶 HuangJunqi~先生

已于 2022-01-21 15:17:01 修改

阅读量555

点赞数 2

文章标签： vue.js

于 2021-12-08 11:48:42 首次发布

本文链接：https://blog.csdn.net/Huangjunqi23/article/details/121787574

版权

话不多说:直接撸起袖子直接淦 !!!!!

CSS片段:

//官方的Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
//CSS片段
    <style type="text/css">
        #app {
            width: 350px;
            margin: 50px auto;
        }

        li {
            list-style-type: none;
        }

        ul {
            padding-left: 0;
        }

        .add {
            width: 200px;
            height: 20px;
            margin-right: 10px;
        }

        .finish {
            color: #ccc;
            text-decoration: line-through;
        }

        .span1 {
            color: skyblue;
        }
    </style>

<body>片段:

 <div id="app">
        <!-- 
            如何计算未完成的任务总数：

            将 arr 进行遍历，能够拿到 obj.bol 值；
            通过判断 obj.bol 的真假，就知道当前这条任务是否完成；
            如果完成，不做计算；如果未完成，将其加入到未完成的数量中；

         -->
        <h1>任务列表</h1>
        <p>任务总数：{{ arr.length }}；还有：{{ choose() }} 未完成；【<span @click='finish()' class="span1">完成</span>】</p>
        <ul>
            <li v-for='(item,index) in arr' v-bind:class='{finish: item.bol}'>
                <input type="checkbox" v-model='item.bol' @click.stop='choose(index)'></input>
                <span v-show='!item.edit' @click='edit(index)'>{{ item.des }}</span>
                <input v-show='item.edit' type="text" v-model='item.des'  @blur='item.edit=false'></input>
            </li>
        </ul>
        <input type="text" class="add" v-model='msg'></input>
        <button @click='add()'>添加</button>
    </div>

</body>

<script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            arr: [
                // 每条数据中应该有数据的内容，和 数据的状态
                { des: '设计产品原型', bol: false, edit: false },
                { des: 'UI设计', bol: false, edit: false },
                { des: '编写页面代码', bol: false, edit: false },
                { des: '编写js代码', bol: false, edit: false },
            ],
            msg: ''
        },
        methods: {
            add: function () {
				if(this.msg == '')
					return;
                // 向数组中添加内容
                this.arr.push({ des: this.msg, bol: false });
                this.msg = '';
            },
            choose: function (i) {
                // i代表当前点中的数据的下标
                // 返回当前数据的一个状态（bol）
                // 遍历数组
                // arr.forEach(function(item){逻辑操作})
                // item 代表每次遍历后得到的值

                var num = 0; //未完成任务数量
				for(let j=0;j<this.arr.length;j++){
					if (! this.arr[j].bol) { //当前任务未完成
                        // 增加未完成任务的数量
                        num++;
                    }
				}
                return num;
            },
            finish: function () {
                // 遍历数组，通过判断bol值，来判断当前待办事项是否完成。
                // 如果完成，那么删除

                // for (var i = 0; i < this.arr.length; i++){
                //  if (this.arr[i].bol) {
                //      // 删除掉
                //      this.arr.splice(i,1);
                //  }
                // }

                // 添加功能
                // this.arr
                // var temp = this.arr;   this.arr清空
                // 遍历temp，如果bol值判断结果为未完成，那么将数据push到this.arr

                var temp = this.arr;
                this.arr = [];

                for (var i = 0; i < temp.length; i++) {
                    if (!temp[i].bol) {
                        this.arr.push(temp[i]);
                    }
                }
            },
            edit: function (i) {
                if (this.arr[i].bol) {
                    return;
                }
                this.arr[i].edit = true;//切换为编辑状态
            }
        }
    });
</script>