Vue类与样式绑定

时间：2023-03-30 22:25:26 CSS

简介HTML元素的类绑定和内联样式绑定是数据绑定的常见需求。因为字符串连接很麻烦而且容易出错。因此，在使用v-bind绑定class和style时，Vue.js做了特别的增强。表达式结果的类型除了可以是字符串之外，还可以是对象或数组。BindingClass对象语法可以通过v-bind:class对象来动态切换类。

上面的语法意味着活动类将取决于数据属性isActive的布尔值。可以在对象中传入更多的属性，实现多个类之间的动态切换。此外，v-bind:class指令也可以与普通类属性共存。1.3.

当数据为：1.data:{2.isActive:true,3.hasError:false4.}，渲染结果为：

将一个计算属性绑定到一个返回值为对象的Class是一个很常见并且强大的方式。

1.数据：{2.isActive:true,3.错误：null4.},5.计算：{6.classObject:function(){7.return{8.active:this.isActive&&!this.error,9.'text-danger':this.error&&this.error.type==='fatal'10.}11.}12.}数组语法可以将数组传递给v-bind:class以应用类列表。1.数据：{2.activeClass:'active',3.errorClass:'text-danger'4.}呈现为：如果你也想根据条件切换列表中的类，可以使用三元表达式：这将始终添加errorClass，但仅??在isActive为真时才添加activeClass。对象语法也可以用数组语法：用在组件上当在自定义组件上使用class属性时，这些类将被添加到组件的根元素。该元素上已经存在的类不会被覆盖。例如，如果你声明这个组件：1.Vue.component('my-component',{2.template:'Hi

'3.})HTML将呈现为：Hi

绑定样式绑定样式是指绑定元素样式的内联。对象语法v-bind:style的对象语法看起来很像CSS，但实际上是一个JavaScript对象。CSS属性名称可以用驼峰式命名或破折号分隔（kebab式，记得用单引号将它们括起来）：1.data:{2.activeColor:'red',3.fontSize:304.}通常最好直接绑定一个style对象，这样模板更清晰：1.data:{2.styleObject:{3.color:'red',4.fontSize:'13px'5.}6.}同样，对象语法也常与返回对象的计算属性。数组语法v-bind:style的数组语法可以对同一个元素应用多个样式对象：v-bind:style时自动添加前缀Vue.js在使用浏览器引擎需要加前缀的CSS属性时，比如transform，会自动检测并添加相应的前缀。多值自2.3.0开始可以为样式绑定中的属性提供多值数组，常用于提供多前缀值，例如：这只会呈现数组中浏览器支持的最后一个值。在此示例中，仅当浏览器支持不带浏览器前缀的flexbox时，才会呈现display:flex。

上一篇：CSS布局

下一篇：【微信小程序】CSS视角制作模态框

Vue类与样式绑定相关文章