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>