vue关于class和样式的使用

墨韵明空

做一个有上进心的攻城狮！

vue关于class和样式的使用

这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。

不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

下面就介绍这几种绑定方式的使用：

1.对象语法：

我们可以传给v-bind:class一个对象，以动态的切换class。注意：v-bind:class指令可以与普通的class特性共存:

<div class="mySelf" v-bind:class="{'class-a':isA,'class-b':isB}"></div>

data:{
   isA:true,
   isB:false
}

此时渲染：

<div class="mySelf class-a"></div>

通过控制isA和isB的变化来控制class的显示和隐藏

换种思考方式：我们可以把class直接赋值一个对象

<div class="mySelf" v-bind:class="classObject"></div>

data:{
    classObject:{
      'class-a':true,
      'class-b':false
    }
}

我们也可以在这里绑定一个返回对象的一个计算属性，所以这里的用法非常强大！。

2.数组语法：

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div v-bind:class="[classA,classB]"></div>
 
data: {
 classA: 'class-a',
 classB: 'class-b'
}

此时渲染：

<div v-bind:class="[classA,classB]">

data: {
 classA: 'class-a',
 classB: 'class-b',
 isB:true
}

如果想根据条件切换列表的class，可以用三元表达式

<div v-bind:class="[classA,isB?classB:'']"></div>

可以控制isB来调节classB的显隐

不过，当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中，可以在数组语法中使用对象语法：

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

3.绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）

<div v-bind:style="{color:bgColor,fontSize:fontSize+ 'px'}"></div>

data:{
  bgColor:'white',
  fontSize: 16
}

既然可以这么写，那么也就可以写成对象模式，这样会更清晰

<div v-bind:style="styleObject"></div>

data:{
  styleObject:{
    color:'white',
    fontSize:'16px'
  }
}

同样的，对象语法也可以结合返回对象的计算属性使用

 

这就是所总结样式用法，希望于大家共同成长吧！