課程
/前端開發(fā)
/Vue.js
/vue2.5入門
點一下已經(jīng)發(fā)布的li，為li加一個樣式，增加刪除線表示完成
2018-11-02
源自：vue2.5入門 3-1
正在回答
提供一個思路：
在v-bind里面使用三目運算符 判斷是否完成 完成添加完成的樣式 否則就是正常樣式
<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,
}
],
newItem:'',
methods:
finish:function (item)
item.isFinished=!item.isFinished
addNewItem:function ()
if(this.newItem!='')
this.items.push({
label:this.newItem,
})
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，再點擊變?yōu)閚one
舉報
快速理解Vue編程理念上手Vue2.0開發(fā)。
2 回答只在一個div里面添加了點擊事件，為什么所有msg都改變了
4 回答點擊li時如何在alert中顯示li的內(nèi)容
4 回答為什么每次點擊都是刪除最后一個,而不是刪除點擊的那個li
1 回答怎么添加單擊事件就報錯?。?/p>
2 回答為什么同時3個包含content的標簽，只有1個綁定了click事件，但是，點擊的時候3個同時觸發(fā)了點擊事件
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2018-11-07
提供一個思路：
在v-bind里面使用三目運算符 判斷是否完成 完成添加完成的樣式 否則就是正常樣式
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>
點擊Li，增加underline，再點擊變?yōu)閚one