如何给li加一个点击改变class事件
点一下已经发布的li，为li加一个样式，增加删除线表示完成
2 回答
<div id="app">
<h1 v-html='title'></h1>
<input v-model='newItem' v-on:keyup.enter='addNewItem'>
<button @click="addNewItem">ADD</button>
<ul>
<li v-for="item in items" v-bind:class="[{finished:item.isFinished},item.color]" @click="finish(item)">{{item.label}}</li>
</ul>
</div>
<script>
new Vue{
el:'#app',
data(){
return{
title:'this is a todo list!',
items:
[
{
label:'code',
isFinished:true,
color:'red',
},
{
label:'run',
isFinished:false,
color:'red',
}
],
newItem:'',
}
},
methods:
{
finish:function (item)
{
item.isFinished=!item.isFinished
},
addNewItem:function ()
{
if(this.newItem!='')
{
this.items.push({
label:this.newItem,
isFinished:false,
color:'red',
})
this.newItem=''
}
},
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.finished{
text-decoration: underline;
}
.red{
color: red;
}
</style>
点击Li，增加underline，再点击变为none
举报
0/150
提交
取消
