简介：本文旨在结合具体项目，让用户学会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>
