Vue记事本小案例

记事本小案例

实现记事本的增删查功能。

<div id="app">
    <input type="text" v-model="msg"><input type="button" value="添加到记事本" @click="save">

    <br>
    <ul>
        <li v-for="item,index in lists">
            {{ index+1 }}   {{ item }}  <a href="javascript:" @click="delRow(index)">删除</a>
        </li>
    </ul>

    <br>
    <span>总数量：{{ lists.length }}</span><input type="button" v-show="lists.length!=0" value="删除所有" @click="deleteAll">
</div>
<!--
    1.完成记事本的查询所有：将所有数据绑定为Vue实例，再遍历Vue实例中数据到页面
    2.添加，添加按钮绑定事件，在事件中获取输入框中的数据，将获取的数据放入到lists里面
    3.删除，删除所有，总数量
-->

<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            lists:["学习编程","学习英语"],
            msg:"",
        },
        methods: {
            save(){//添加到记事本
                this.lists.push(this.msg);
                this.msg = "";
            },
            delRow(index){//删除一条记录
                //根据下标删除数组中某个元素
                this.lists.splice(index,1);//index:从几开始删除，1：删除1个元素
            },
            deleteAll(){//删除所有数据
                this.lists = [];
            }
        }
    });
</script>