class与style绑定

1、绑定HTML class

1.1、对象语法

如果数据属性 发生改变，class 列表将相应地更新。

【案例】

此外v-bind:class 指令也可以与普通的 class 属性共存。

【例如】

.active{    width: 100px;    height: 100px;    background: red;}        
    
    
     
    
结果看下图

我们也可以直接绑定数据里的一个对象

【案例】

.active1{    width: 100px;    height: 100px;    margin-top: 10px;    border: 1px solid #ccc ;}
    
    
     
    
结果下图

我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

【案例】

.aaa{    background: green;    width: 100px;    height: 100px;    margin-top: 10px;}
    
    
     
    
结果为下图

以上是3种动态绑定class的对象语法

1、直接绑定 2、数据属性绑定 3、计算属性绑定

1.2、数组语法

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

【案例】

    
    
     
      {
   {msg}}
     
    
结果为图

我们也可以用三元表达式

【例如】我们不让class属性aaa显示

    
    
     
      {
   {msg}}
     
    
结果下图

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

【案例】

    
    
     
      {
   {msg}}
     
    
结果下图

1.3、在组件上

在一个自定义组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。

【案例】

    
    
     
    
结果下图

2、绑定内联样式

2.1、对象语法

    
    
     
      内联样式
     
    
     
      内联样式
     
    
结果下图

2.2、数组语法

可以绑定一个或多个

【案例】

    
    
         
     
      内联样式
     
    
结果下图

2.3、自动添加前缀

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

喜欢的朋友别忘了点赞加收藏！！！！！