Vue 指令练习

  #box {
            width: 350px;
            margin: 30px auto;
            background-color: #eee;
            padding: 30px;
        }

        ul {
            list-style: none;
            padding-left: 0;
        }

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

        .span1 {
            color: skyblue;
        }

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

<div id="box">
        <h1>任务列表</h1>
        <p>任务总数：{{arr.length}}；还有：{{choose()}}未完成；【<span class="span1" @click='finish()'>完成</span>】</p>
        <ul>
            <!-- v-bind实现class的样式 -->
            <li v-for='(item,index) in arr' v-bind:class="{finish:item.bol}">
                <input type="checkbox" v-model='item.bol'>
                <span v-text='item.des' v-show='!item.edit' @click='edit(index)'></span>
                <input type="text" v-model='item.des' v-show='item.edit' @blur="item.edit=false">
                <!-- 
                    @事件名称 = ‘函数/简单的js代码’
                 -->
            </li>

        </ul>
        <!-- 给按钮添加点击事件 -->
        <input type="text" class="add" v-model='msg'><button @click='fn()'>添加</button>
    </div>

    var vm = new Vue({
        el: '#box',
        data: {
            // 每条数据中应该有数据的内容 和 数据的状态 和 编辑的状态
            arr: [
                { des: '设计', bol: false, edit: false },
                { des: '编写页面代码', bol: false, edit: false },
                { des: '编写js代码', bol: false, edit: false },
                { des: '设计产品原型', bol: false, edit: false },

            ],
            msg: ''
        },
        methods: {
            // 点击按钮添加到li标签
            fn: function () {
                // 添加数据
                // 改变成数组添加进去
                this.arr.push({ des: this.msg, bol: false })
                this.msg = ''
            },
            choose: function () {
                // 对所有数组中的元素进行遍历，查看bol
                // 如果bol为false是未完成的
                // 如果bol为true是完成的

                var num = 0 // 未完成任务的数量
                this.arr.forEach(item => {
                    if (!item.bol) {
                        //当前任务未完成
                        // 增加未完成任务的数量
                        num++
                    }

                });
                return num
            },
            finish: function () {
                // 对所有数据进行遍历，如果已完成，将其删掉

                // 先将arr清空 遍历：将未完成的数据，重新添加进来

                var temp = this.arr    // 在清空arr前，现先将arr中的数据，保存在临时变量中
                this.arr = []

                for (var i = 0; i < temp.length; i++) {
                    if (!temp[i].bol) {
                        //  temp[i].bol状态为false
                        console.log(temp[i].bol);
                        this.arr.push(temp[i])
                        console.log(temp[i]);

                    }
                }
            },
            edit: function (i) {
                // 需要判断一下，当前的数据是否完成
                // 如果已完成的状态，那么不能对数据进行更改
                // 如果是未完成的状态，才可以改变edit
                if(this.arr[i].bol){
                    return
                }


                // 更改 edit 值，改为true
                this.arr[i].edit = true
            }
        }
    })