如何給li加一個(gè)點(diǎn)擊改變class事件
點(diǎn)一下已經(jīng)發(fā)布的li，為li加一個(gè)樣式，增加刪除線表示完成
楊洋洋
2018-11-02
2 回答
舉報(bào)
0/150
提交
取消
2018-11-07
提供一個(gè)思路：
在v-bind里面使用三目運(yùn)算符 判斷是否完成 完成添加完成的樣式 否則就是正常樣式
2018-11-07
<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>
點(diǎn)擊Li，增加underline，再點(diǎn)擊變?yōu)閚one