欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

Vue实现简易备忘录

2025-07-21 07:05:46
Vue实现简易备忘录 简介：本文旨在结合具体项目，让用户学会vue的button组件与个事件怎么结合。初始代码：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

Vue实现简易备忘录

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

初始代码：

代码语言：javascript代码运行次数：0运行复制
<!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>
        <h>当前备忘录条</h>
    </div>
</body>
    <script>
        ct app = new Vue({
            el:"#app",
            data:{
                lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值
            },
            methods:{
            }
        });
    </script>
</html>

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

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

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

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

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

代码语言：javascript代码运行次数：0运行复制
<!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>
        <h>当前备忘录{{lists.length}}条</h>
    </div>
</body>
    <script>
        ct app = new Vue({
            el:"#app",
            data:{
                lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值
            },
            methods:{
                saveItem(){
                    // 通过ref实现获取input中的内容
                    // this.lists.push(this.$value)

                    // 通过v-model实现获取input中的内容
                    this.lists.push()
                },
                deleteItem(index){
                    this.lists.splice(index, 1);
                },
                clearAll(){
                    this.lists.splice(0, this.lists.length)
                }
            }
        });
    </script>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2022-10-19，如有侵权请联系 cloudcommunity@tencent 删除button函数设计事件数组

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1160017.html

相关标签：无
上传时间： 2025-07-20 12:35:36

上一篇：Flink中的窗口操作是什么？请解释其作用和使用场景。

下一篇：Flink中的状态管理是什么？请解释其作用和常用方法。

推荐阅读

留言与评论（共有 18 条评论）
注册新账号 登录
本站网友 网易每日轻松一刻
24分钟前 发表
data
本站网友 贵人鸟加盟
29分钟前 发表
key="index"> {{index + 1}}. {{content}}<a href="javascript
本站网友 金夫人婚纱摄影
20分钟前 发表
key="index"> {{index + 1}}. {{content}}<a href="javascript
本站网友 集美房屋出租
12分钟前 发表
方法名：deleteItem() 提示：将v-for的index传递给你所写的删除函数
本站网友 上海二手房产
2分钟前 发表
data
本站网友 艾尼路
18分钟前 发表
initial-scale=1.0"> <title>案例备忘录</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 通过ref获取input中的内容 --> <!-- 请输入内容
本站网友 长高体操
3分钟前 发表
{ saveItem(){ // 通过ref实现获取input中的内容 // this.lists.push(this.$value) // 通过v-model实现获取input中的内容 this.lists.push() }
本站网友 沙发背景墙
15分钟前 发表
<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> --> <!-- 通过v-model实现上面的功能 --> 请输入内容
本站网友 小肚子
6分钟前 发表
this.lists.length) } } }); </script> </html>本文参与 腾讯云自媒体同步曝光计划
本站网友 粤s88888
17分钟前 发表
clearAll(){ this.lists.splice(0
本站网友 e000002
16分钟前 发表
initial-scale=1.0"> <title>案例备忘录</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 通过ref获取input中的内容 --> <!-- 请输入内容
本站网友 替米沙坦片价格
17分钟前 发表
分享自作者个人站点/博客
本站网友 三亚楼盘信息
17分钟前 发表
能够将此条目删除掉
本站网友 室内装潢设计
12分钟前 发表
"#app"
本站网友 连花清瘟颗粒说明书
10分钟前 发表
deleteItem(index){ this.lists.splice(index
本站网友 国学府
3分钟前 发表
methods
本站网友 榴莲煲鸡
16分钟前 发表
;" @click="clearAll()">清空备忘录</a> <h>当前备忘录条</h> </div> </body> <script> ct app = new Vue({ el