vue记事本案例

最新推荐文章于 2024-05-16 21:37:28 发布

cabacwj

最新推荐文章于 2024-05-16 21:37:28 发布

阅读量244

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cabacwj/article/details/127028600

版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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="./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>
    
</body>
</html>

效果图：