<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <h3 class="titile">MAMA记事本</h3> <div class="body"> <input type="text" v-model="inputvalue" v-on:keyup.enter="add(inputvalue)"> <ul> <li v-for="(item,index) in things"> <!-- 注意:in和前面的空格--> <div> <span>{{index+1}} </span><label>{{item}}</label><button v-on:click="remove(index)">X</button> </div> </li> </ul> <p v-show="things.length!=0">您记录了{{things.length}}条</p> <p v-show="things.length!=0" v-on:click="clear">点击清空</p> </div> </div> </body> <script> let app=new Vue({ el:"#app", data:{ things:["吃东西","睡觉","玩手机"], inputvalue:"王者荣耀", }, methods:{ add:function (p1) { this.things.push(p1); }, remove:function (index) { console.log(index); this.things.splice(index,1); }, clear:function () { this.things=[]; } } }) </script> </html>