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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,244评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,080评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,097评论 4 129
  • 铜 从地下被刨出 熔化为一只鼎 有时烹煮着鲜美的羊 有时炙烫着俘虏的身躯 伴着庄严的钟馨之声 安享王道乐土 某个发...
    db71db11878b阅读 235评论 0 0
  • 感情这条路,无非是让你明白执着是最沉重的包袱。它不会永远横亘在心里,也迟早会散开。 再苦痛的,随着时间,也就慢慢看...
    与尔熙阅读 257评论 0 1