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='';
}
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
10 温暖祝福语长辈的话简短
11 新年祝福语大全简短成语
12 女士简短祝福语大全集
13 生日奥特曼可爱祝福语简短
14 成语祝福语精选大全简短
15 恭喜高考完祝福语简短
16 生日祝福语宿舍舍友 简短
17 婚礼红包祝福语简短霸气
18 朋友出国旅游祝福语简短