vue实现列表的添加点击
本文实例为大家分享了vue实现列表的添加点击,供大家参考,具体内容如下
使用指令:v-onv-forv-onv-bindv-model
html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>vue.js</title> <style> body{font-family:"\5FAE\8F6F\96C5\9ED1"} .red{color:red;} body>div{ width:200px; margin:50pxauto; } </style> </head> <body> <divid="app"> <h3>vue——列表的添加</h3> <inputtype="text"v-model="newitem"v-on:keyup.enter="clickKey"> <ul> <liv-for="iteminitems"v-text="item.event" v-bind:class="{red:item.isFinish}"v-on:click="liClick(item)"></li> </ul> </div> <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> <scriptsrc="testvue.js"></script> </body> </html>
js
window.onload=function(){ Vue.component("todo-item",{ props:["todo"], template:"<li>{{todo.text}}</li>" }) varapp=newVue({ el:'#app', data:{ items:[ ], newitem:'' }, methods:{ liClick:function(item){ item.isFinish=!item.isFinish; }, clickKey:function(){ this.items.push({ event:this.newitem, isFinish:false }) this.newitem=''; } } }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。