制作一个可以输入添加的备忘录，内容以表格形式呈现。 按下回车可添加，点击删除可根据id删除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>备忘录</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <!-- <script src="../vue.js"></script> --> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> window.onload = function() { new Vue({ el: "#app", data: { temp: '', arrText: [], num: 1 }, methods: { insert() { var text = this.temp; var id = this.num; this.num++; var obj = { id, text }; this.arrText.push(obj); this.temp = ''; }, deleteRow(id) { //ES6 //根据id查找元素 findIndex //函数内如果返回true，就结束遍历并返回当前index; //index如果没有找到返回-1 let index = this.arrText.findIndex((ele) => { return ele.id === id; }); //假设没有找到 console.log(index); if (index === -1) { return console.log('删除失败'); } //删除元素 this.arrText.splice(index, 1); console.log(this.arrText); }, } }) } </script> </head> <body> <div id="app"> <el-input placeholder="请输入内容" v-model="temp" clearable style="width: 200px" @keyup.native.enter="insert"> </el-input> <!-- 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native --> <el-button type="primary" plain @click='insert'>添加</el-button> <template> <el-table :data="arrText" style="width: 100%"> <el-table-column prop="id" label="序号" width="180"> </el-table-column> <el-table-column prop="text" label="内容" width="180"> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.row.id, arrText)" type="text" size="small"> 移除 </el-button> </template> </el-table-column> </el-table> </template> </div> </body> </html>