<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ border: 1px solid red; } </style> </head> <body> <!-- 备忘录： 新增：enter新增备忘录 删除：X删除备忘录 统计：统计备忘录的条数 清空：清空备忘录 隐藏：隐藏统计和清空按钮 --> <div id="app"> <h3>备忘录</h3> <p> <!-- v-model="msg" 绑定内容，省略定位 --> <!-- @keyup.enter="addMsg" 回车新增 --> <input type="text" v-model="msg" @keyup.enter="addMsg"> <!-- v-for="(item, index) in msgArr" 循环显示 --> <ul style="list-style-type: none;" v-for="(item, index) in msgArr"> <li> <span> {{index+1 + " . "}} </span> <label> {{item}} </label> <!-- 点击调用删除方法 --> <input type="button" value="删除" @click="removeMsg(index)"> </li> </ul> </p> <p> <!-- 绑定属性value --> <input type="button" :value="msgArr.length" v-show="msgArr.length>0"> <input type="button" value="清空" v-show="msgArr.length>0" @click="clearArr"> </p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） // 存储用户输入 msgArr: [], // 用户输入内容 msg: "" }, methods: { // 用户输入内容添加到数据 addMsg(){ this.msgArr.push(this.msg); }, // 清空数据和输入内容 clearArr(){ this.msgArr=[]; this.msg=""; }, // 删除 removeMsg(index){ // 根据索引进行删除，每次删除一个 this.msgArr.splice(index, 1); } } }) </script> </body> </html>
原文：https://www.cnblogs.com/lizitestdev/p/14645344.html