Vue样式绑定

本文是续Vue数据绑定 - 简书一文。
vue绑定属性的语法为attribute=’expression‘

目的

如果是true的话，就在该项事件上加一个删除线
首先为li元素添加checked这个类。

<li v-for='(todo,index) in todos'
    :class="{'checked':todo.done}"
    >{{index+1}} {{todo.value}}
</li>

上述代码的作用如图

image.png

接着为class=’checked‘的项目单独设置样式。这里用来属性选择器。 line-through代表删除线。

li[class='checked'] {
    text-decoration: line-through;
}

最终结果如图

image.png