美文网首页
Vue2学习笔记:vue的Class与Style绑定

Vue2学习笔记:vue的Class与Style绑定

作者: 趁你还年轻233 | 来源:发表于2016-11-21 16:36 被阅读0次

    一、绑定HTML Class

    ①对象语法(对象中的属性值为true时才能添加class)

    渲染结果为:

    实现同样的效果,也可以直接绑定数据里的一个对象,这种写法更加清爽!

    也可以计算属性,即在computed中定义函数

    尤大神说这种模式很强大,我暂时没感受到没,待探索

    ②数组语法(不止可以传对象,还可以传数组)

    渲染结果为:

    此例始终添加errorClass,但是只有在isActive是 true 时添加activeClass。

    ③With Components

    这个部分竟然没有中文文档,不过还好咱能看懂。

    当为组件添加class时,这些classes会被重新添加到根元素上,例如:

    重复添加了class:

    但是有一个比较有趣的地方是,可以在自定义的组件标签上添加active class,为真时添加到根元素active,为假时删除active。

    二、绑定内联样式

    ①对象语法

    ②数组语法

    将多个样式对象应用到一个元素上:

    ③自动添加前缀

    当v-bind:style使用需要特定前缀的 CSS 属性时,如transform,Vue.js 会自动侦测并添加相应的前缀。

    学好Vue!

    成为优秀的前端工程师!

    相关文章

      网友评论

          本文标题:Vue2学习笔记:vue的Class与Style绑定

          本文链接:https://www.haomeiwen.com/subject/qveupttx.html