Vue实现简易备忘录

GeekLiHua

发布于 2025-01-21 12:24:11

4700

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

简介：本文旨在结合具体项目，让用户学会vue的button组件与个事件怎么结合。

初始代码：

<!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>案例备忘录</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过ref获取input中的内容 -->
        <!-- 请输入内容:<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> -->
        <!-- 通过v-model实现上面的功能 -->
        请输入内容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到备忘录</button><br>
        <ul>
            <li v-for="(content, index) in lists" :key="index">
                {{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">删除</a></li>            
        </ul>
        <a href="javascript:;" @click="clearAll()">清空备忘录</a>
        <h3>当前备忘录3条</h3>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值
            },
            methods:{
            }
        });
    </script>
</html>

设计要求：在methods中添加三个方法，分别完成如下功能：

点击”添加到备忘录“按钮，能够将文本框中输入的项目添加到列表。方法名：saveItem()

提示：这需要给这个按钮添加绑定一个单击事件。在此事件的处理函数中需要将文本框的value交给v-model处理。同时思考如何用Javascript对数组进行增加和删除元素操作。

点击列表中项目名称后的”删除“，能够将此条目删除掉。方法名：deleteItem() 提示：将v-for的index传递给你所写的删除函数，这样就得到了要删除的那个元素的index。
点击”清除备忘录“，列表中的所有条目都被删除掉。方法名：clearAll()

随着添加或删除操作，显示的总条数能够随之变化。

<!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>案例备忘录</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过ref获取input中的内容 -->
        <!-- 请输入内容:<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> -->
        <!-- 通过v-model实现上面的功能 -->
        请输入内容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到备忘录</button><br>
        <ul>
            <li v-for="(content, index) in lists" :key="index">
                {{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">删除</a></li>            
        </ul>
        <a href="javascript:;" @click="clearAll()">清空备忘录</a>
        <h3>当前备忘录{{lists.length}}条</h3>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值
            },
            methods:{
                saveItem(){
                    // 通过ref实现获取input中的内容
                    // this.lists.push(this.$refs.textvalue.value)

                    // 通过v-model实现获取input中的内容
                    this.lists.push(this.textvalue)
                },
                deleteItem(index){
                    this.lists.splice(index, 1);
                },
                clearAll(){
                    this.lists.splice(0, this.lists.length)
                }
            }
        });
    </script>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-19，如有侵权请联系 cloudcommunity@tencent.com 删除

button