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='';
}
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。