Vue 备忘录

最新推荐文章于 2023-04-06 23:19:31 发布

冰镇奶茶

最新推荐文章于 2023-04-06 23:19:31 发布

阅读量557

点赞数 1

分类专栏：笔记文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_57002951/article/details/123639700

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<!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="content">
        <button @click="addLists">添加到备忘录</button>
        <br>
        <ul>
            <!-- 
            1、备忘录列表中的数据要交给vue管理 
            2、添加备忘录
            3、删除备忘录
            4、清空备忘录
            5、备忘录总条数
        -->
            <li v-for="(content,index) in lists" :key="index">{{index + 1 }} . {{content}}
                <a href="javascript:;" @click="deleteContent(index)">删除</a>
            </li>
        </ul>

        <ul v-show="lists.length == 0 ">
            <li>当前没有存入任何数据！</li>
        </ul>

        <a v-show="lists.length != 0" href="javascript:;" @click="lists = []">清空备忘录</a>

        <li>当前备忘录共 ： {{lists.length}} 条</li>
    </div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            lists: [],
            content: "",
        },
        methods: {
            addLists() { //保存到备忘录
                //放入列表中（将元素放入数组中）
                if (this.content) {
                    this.lists.push(this.content);
                    //清空原始数据
                    this.content = "";
                }
            },
            deleteContent(index) {
                //删除
                console.log(index);
                this.lists.splice(index, 1); //根据下标删除(两个参数，参数1：从哪个位置开始删，参数2：删除几个)
            },

        }
    })
</script>
<style>
    #app {
        width: 450px;
        height: 700px;
        background-color: rgba(216, 206, 149, 0.5);
    }
</style>

实现的功能：

1、备忘录列表中的数据要交给vue管理
2、添加备忘录
3、删除备忘录
4、清空备忘录
5、备忘录总条数