p19本地应用-记事本新增02<div id="todoapp" class="center"><!--头部--><div class="cola"><h2 >百事可乐</h2></div><div><input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="input_text" @keyup.enter="add" v-model="inputVaule"/><hr ></div> <!--列表区域--><ul><ol class="input_text color" v-for="(item,index) in arr">{{index+1}}.{{item}}<button type="button" class="destroy" @click="remove(index)">×</button></ol></ul><div class="footer" v-show="arr.length!=0"><div >{{arr.length}} items left</div><div @click="clear" class="pointer">Clear</div></div><hr ></div><script type="text/javascript">var vues = new Vue({el:"#todoapp",data:{arr:["beauty","wisdom","smile"],inputVaule:"study",},methods:{add:function(){this.arr.push(this.inputVaule);},remove:function(index){this.arr.splice(index,1);},clear:function(){this.arr = [];}}})</script>