【Vue样式绑定】

姘存按发布于2019-08-20 18:32 / 1003人阅读

摘要：上面代码中通过数组的方式定义绑定了个属性，其实就是构成了属性值到样式名称之间的映射。

HTML样式的绑定无非就Class和Style的绑定，使用Vue的时候原生的绑定形式仍然可以使用，但是既然都使用了Vue了，还是建议遵循Vue的语法规范。

一. 绑定 HTML Class 1.1 对象语法

之前我们说过，html中绑定属性的方式是使用【v-bind】，那么 class 的绑定也一样

上面代码中我们使用【v-bind】为class绑定了一个对象，对象中 active 为class的名称，样式是否生效取决于 isActive 是否为真值。

上面代码中我们为一个html绑定了多个class,但是只有 active 是生效的，因为 isport 的值为 false ，有了这样的语法之后，我可以直接通过控制数据来控制哪些样式生效。

【在属性的绑定中我们可以使用表达式或者计算属性】

上面代码中我们在class的绑定中使用了表达式，表达式是一个函数的调用，在函数中我们可以定义更加复杂的样式逻辑和样式列表。

上面代码中我们使用【计算属性】同样定义了一个样式对象，在计算属性逻辑中我们也可以定义更加复杂的样式列表，有了表达式和计算属性为我们的样式绑定提供了个更加强悍的功能。

1.2 数组语法

上面介绍了对象的语法，可以说很强悍，那么我再整理一下数组绑定样式的写法。

上面代码中通过数组的方式定义绑定了2个class属性，其实就是构成了【data】属性值到样式名称之间的映射。
我们同样也可以在数组语法中使用表达式，引用官网的一个例子

上面代码中class中始终有 errorClass ，但是 activeClass 是否添加取决于 isActive 是否为真值。

【总结！！】Class的绑定总觉得数组的形式过于繁琐，我们需要定义很多映射关系属性，所以从简洁的角度出发，建议还是使用【对象】的形式。

1.3 组件绑定Class

如果知道组件，那就看一下，不知道的就先跳过吧。
当我们为组件添加class的时候，所有的class会被添加到组件的【根元素上】面，这个根元素上面已经有了的class不会被覆盖。

我们先定义一个组件

Vue.component("hello", {
    template: `
        
            Hello
        
    `
})

接下来应用组件，并添加Class

渲染的结果如下


    
        
            Hello

上面代码中，later被添加到了 hello 组件的【根节点】上，上面我们是用的原生的 Class 进行绑定的，接下来我们换成Vue的绑定形式，会发现其实效果是一样的，也是绑定到了【根节点】上面。

二. 绑定内联样式

上面介绍了Class的绑定，我再总结一下内联样式的绑定

2.1 对象语法

在Class的绑定中，对象的属性是Class名称，属性值用于判断该Class是否生效；在内联样式的绑定中，属性是【样式名】，属性值是【样式值】


    
       BLUE

上面代码将样式对象直接绑定到了HTML元素中，短横线分割的命名被改成了驼峰命名，Vue1.0中这个要求是比较严格的，但是Vue2.0中支持了短横线的命名规则。

上面我们在绑定Class的时候使用了【计算属性】和【表达式】的形式,在内联样式中我们也来玩一下


    
        BLUE

上面代码使用【计算属性】返回一个对象，用于内联样式，表达式就不演示了，和Class的绑定基本是一样的。

2.2 数组语法

内联样式的数组语法其实就是将对各样式对象用于一个HTML元素，数组中是一个一个的对象


    
        BLUE

上面代码定义了两个【计算属性】返回两个样式对象，然后绑定到内联样式的数组中，最后解析成注释的那样子。总感觉数组形式的绑定挺麻烦的，反正我不大喜欢用数组进行绑定，但是在分离样式对象的时候还是挺有用的。

云服务器 idc机房托管 vue绑定内联样式 vue绑定 django vue 数据绑定绑定Style样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84653.html

Vue 2 | Part 4 v-bind绑定元素属性和样式

摘要：它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。绑定属性最简单的例子，我们有一张图片，需要定义图片的。注意样式的写法跟会有些许不同，横杠分词变成驼峰式分词。这期就到这里，敬请期待下一期列表渲染和事件监听。这期跟大家分享的，是v-bind指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。绑定属性最简单的例子，我们有一张图片，需要定...

vboy1010 2019-08-20 13:51 评论0 收藏0
Vue.js-计算属性和class与style绑定

摘要：每一个计算属性都包含一个和一个。使用计算属性的原因在于它的依赖缓存。及与绑定的主要用法是动态更新元素上的属性。测试文字当的表达式过长或逻辑复杂时，还可以绑定一个计算属性。学习笔记：前端开发文档计算属性所有的计算属性都以函数的形式写在Vue实例中的computed选项内，最终返回计算后的结果。计算属性的用法在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终...

Shihira 2019-08-23 16:02 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cristic 2019-08-02 11:23 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

yeooo 2019-08-05 14:50 评论0 收藏0