Vue基础小练习--待办事项（考察v-model的理解程度）

思路：

• 增加代办事项就是增加list数组的长度，新增内容；
• 删除待办事项就是减少list属性长度，删除数组里的内容； 
• 标签要循环遍历list数组内容；

代码：

    <div id="box">
        <input type="text" v-model="mytext">
        <button @click="handleAdd()">addbutton>
        
        <ul v-show="list.length">
            <li v-for="(item,index) in list">
                {{item}}
                <button @click="handleDel(index)">delbutton>
            li>
        ul>
        <div v-show="!list.length">待办事项空空如也div>
    div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                list:["111","222","333"],
                mytext:"aaa"
            },
            methods:{
                handleAdd(){
                    // console.log("获取到value值",this.mytext)
                    this.list.push(this.mytext)
                    //清空输入框
                    this.mytext=""
                },
                handleDel(index){
                    console.log("del",index)
                    this.list.splice(index,1)//删除元素
                }
            }
        })
    script>
body>

• v-model的作用就是双向绑定了一个输入框的value
• 这个v-model指的就是输入框里的值，所以获取到输入框的值就是拿到这个状态：mytext
• v-show="list.length"的作用是，当待办事项没有的时候，就显示“待办事项空空如也”，通过v-show来显示和隐藏，后面是数组的长度，数组长度为空就显示，不为空就不显示

 结果：