本文是續(xù)Vue數(shù)據(jù)綁定 - 簡(jiǎn)書一文采够。
vue綁定屬性的語(yǔ)法為attribute=’expression‘
目的
如果是true的話，就在該項(xiàng)事件上加一個(gè)刪除線
首先為li元素添加checked這個(gè)類。
<li v-for='(todo,index) in todos'
:class="{'checked':todo.done}"
>{{index+1}} {{todo.value}}
</li>
上述代碼的作用如圖
image.png
接著為class=’checked‘的項(xiàng)目單獨(dú)設(shè)置樣式。這里用來屬性選擇器秤标。 line-through代表刪除線。
li[class='checked'] {
text-decoration: line-through;
}
最終結(jié)果如圖
image.png
