vue class与style绑定

zoukankan html css js c++ java

vue class与style绑定
1 Class 与 Style

在使用组件的时候，不可避免的要去使用内联的 style 属性去设置标签样式，按照常规的使用，style 只能是一些属性列表组合成的字符串；这限制了在使用组件时可以自定义或者动态改变样式，而 Vue 对标签的 style 属性进行了优化，从而使其可以支持对象/字符串/数组形式的赋值。

2 v-bind:class 的应用

使用时取值可以是普通的样式名作为 key和真假值组成的对象，也可以使用计算属性

2.1 绑定字面量对象

除了可以使用原生的 class 类属性之外，vue 提供了 v-bind:class 来使用类样式

比如：改变 div 的背景色，给 div 绑定到 class: active
```
// div 样式
<style>
    #test { width: 100px; height: 100px; }
    .test { background-color: gray; }
    .active { background-color: red; }
</style>
```
这里样式定义的时候需要注意，如果 .test 是固定样式，.active 是可变样式，那么两者样式声明的先后顺序就是 .test -> .active，否则不论怎么使用 v-bind:class，并且后续改变 {active: true} 的值都无法改变背景，因为从优先级上来说，都被后面声明的 .test 给覆盖了。
```
// vue 域
<div id="app">
    <div id="test" class="test" v-bind:class="{ active: isActive }"><h1>{{message}}</h1></div>
</div> 
```
数据：
```
// Vue 组件
var vm = new Vue({
    el: '#app',

    data: {
        message: 'hello vue !',
        isActive: true,
    }
})
```
结果为：通过修改 isActive 的值来决定是否添加样式：.active

如果将 .test 和 .active 样式声明顺序调转一下，现象如下：

无论如何修改isActive 的值都无法使 .active 的样式生效

2.2 绑定普通对象

修改点1：将绑定内容修改成 data 中定义的数据对象 generalClsObj，该对象包含了类似上面字面量写法的对象，比如：{a:true, b:false}
```
<div id="app">
    <div id="test" class="test" v-bind:class="generalClsObj"><h1>{{message}}</h1></div>
</div> 
```
修改点2： data 数据中添加类样式绑定的对象
```
data: {
    // 普通对象
    generalClsObj: {
        active: true,
        'text-danger': false
    }
}
```
这里 generalClsObj 对象里面的成员值也可以使用 data 数据内的属性

增加样式：

.text-danger { color: blue; }

效果如下：

2.3 绑定计算属性

计算属性特性：只有被绑定的状态值发生变化时，则计算属性的值才会重新计算得出最新结果，因为计算属性会缓存计算结果。

修改点1：把绑定内容改成计算属性

<div id="test" class="test" v-bind:class="computedClsObj"><h1>{{message}}</h1></div>

修改点2：数据中添加计算属性绑定的状态值
```
data: {

    isActive: true,
    error: null,
}
```
修改点3：添加计算属性
```
computed: {
    computedClsObj: function () {
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal',
        };
    }
}
```
测试结果：控制台修改 this.isActive 和 this.error 值

修改 this.error = {type: 'fatal'}; 表示出现错误，错误类型为 fatal，背景会还原，文字颜色为 text-danger 的蓝色；

强制修改 isActive 为 true，背景会变红；

由此可见，通过修改计算属性 computedClsObj 绑定的状态值，可以触发计算属性重新计算值，从而触发 UI 更新显示。

2.4 绑定数组

绑定数组的时候，数组元素可以是普通类型，如果需要绑定状态值来决定是否使用样式，则可以用三元符表达式最后取结果的值，也可以直接指定元素为对象；
- 数组元素为普通类型
  
  为普通类型的时候，需要在组件模型 data: {} 中定义，比如：activeCls 和 textDangerCls
  
  data: { activeCls: 'active', textDangerCls: 'text-danger' }
  
  然后就可以直接使用了，如下
  
  v-bind:class="[activeCls, textDangerCls]"
  
  渲染后的结果是：
- 数组元素为三元符形式
  
  使用方式：
  
  <div id="test" class="test" v-bind:class="[ isActive ? activeCls : '', textDangerCls]"><h1>{{message}}</h1></div>
  
  渲染后的结果，将是 div#test 的样式会有三个：test active text-danger
  
  修改 isActive 为 false，active样式会被删除，只剩下 test text-danger
- 数组元素为对象形式
  
  由于需要使用条件判断，或者需要将样式绑定到状态值，或者可以当作是三元符的一种简化方式，可以使用对象形式作为数组元素来处理样式
  
  <div id="test" class="test" v-bind:class="[ {active: isActive}, textDangerCls]"><h1>{{message}}</h1></div>
  
  修改后的效果同三元符，不做赘述。
  
  <div id="test" class="test" v-bind:class="[ {active: isActive, 'text-danger': error} ]"><h1>{{message}}</h1></div>
  
  其实这种使用方式和完全用对象形式差不多，只是使用数组的时候可以考虑更多的情况。
  
  对象形式：
  
  v-bind:class="{active: isActive, 'text-danger': error}"
3 组件样式

组件样式：定义在自定义组件上的样式，使用 class= 或者 v-bind:class= 形式均可。

组件样式最终会被应用到该组件的顶级标签上（即：最外层标签）

比如：
- 普通类样式：class=
  
  自定义组件：
  
  Vue.component('my-component', { template: '<div id="my-comp" class="red big">my component</div>' });
  
  样式：
  
  .red { background-color: red; } .big { font-size: 32px; } .tall { height: 100px; } .short { width: 200px; } .wide { width: 300px; }
  
  组件模版中只有 red big，在使用的时候通过 class="tall wide 属性给组件添加样式，最后添加到的标签为最外层标签，即 id="my-comp" 的 div 标签上面。
  
  有子标签的渲染结果：
- v-bind:class= 绑定类样式
  
  修改组件内绑定样式：
  
  <my-component v-bind:class="{tall: true, wide: true}"></my-component>
  
  渲染结果同上。
  
  关于组件上的绑定样式使用和普通标签的使用方式是一样的，具体可参考上面的章节。
  
  此处省略……。
4 绑定内联样式

内联样式的使用是通过 style 属性定义。

使用方式：v-bind:style="value"，与 v-bind:class 同样，value的值也可以是对象，数组。

以下分别针对对象和数组形式的样式来说明：

4.1 内联样式对象类型

语法： v-bind:style={ color: 'red', 'font-size': '32px' }

对象内的关键字与普通 css 样式对应，同时也可以是驼峰式写法，比如上面的可以写成：{color: 'red', fontSize: '32px'}

在使用对象类型的时候，推荐使用data:{}中声明方式，然后通过 v-bind:style= 直接绑定数据。
```
data: {
    styleObj: {
        color: 'red',
        fontSize: '32px'
    }
}
```
使用：

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

尝试使用计算属性
```
data: {
    fontColor: 'blue',
    fontSize: '32px',
},

computed: {
    computedStyleObj: function () {
        return {
            color: this.fontColor,
            fontSize: this.fontSize,
        }
    },
}
```
然后修改成： <div v-bind:style="computedStyleObj"></div>

结果OK：

4.2 绑定数组内联样式

数组内联样式，通过 v-bind:style=[] 指定，数组内的元素可以是普通的 css 样式

例如：

<div v-bind:style="{background: 'red', fontSize: '22px', color: 'white'}">我是内联样式：数组格式</div>

也可以是对象数组:

<div v-bind:style="[{background: 'red'}, {color: 'white'}, {fontSize: '22px'}]">我是内联样式：数组格式</div>

为了简便易读，最好采用数据属性方式：即在 data 中声明，v-bind:style= 中使用
```
data: {
    arrStyle: [
        {background: 'red'},
        { color: 'white' },
        { fontSize: '22px' }
    ]
}
```
然后使用： <div v-bind:style="arrStyle">我是内联样式：数组格式</div>

还可以对象数组形式：

<div v-bind:style="[bgStyle, colorStyle, fontStyle]">我是内联样式：数组格式</div>
```
data: {
    bgStyle: { background: 'red' },

    colorStyle: { color: 'white' },

    fontStyle: { fontSize: '22px' }
}
```
5 样式自动前缀

与样式有关的还有这个，在有多个浏览器前缀的样式，vue 会自动为该属性添加前缀。
```
<h3>自动前缀</h3>
<div v-bind:class="['rect', 'red']" v-bind:style="transformStyle">transform 自动前缀</div>
```
transform 样式数据：
```
data: {
    transformStyle: {
        transform: 'rotate(7deg)'
    }
}
```
从渲染结果中元素的style 中看，貌似并没有多个前缀的样式出现。

找了下，貌似没找到比较实际有用的关于 vue 自身的自动前缀的问题，到时看到个通过 webpack 打包配置来实现自动前缀的问题，在这里贴下：
```
test: /.vue$/,
loader: 'vue-loader',
options: {
    // vue-loader options go here
    postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
```
这里是 autoprefixer 插件的地址和介绍。

6 多重值

-

多重值问题不是很明白，也没搜出什么结果，暂时先做遗留。

7 总结

本篇记录了官网学习的一些关于标签或组件的样式，包括类样式，绑定类样式，绑定行内样式等内容。

绑定类样式方式： v-bind:class=“styleClsName"

这种方式是基于类样式名称上的，具体的值可以是
1. 类名： v-bind:class="focus"
2. 类名数组：v-bind:class="['focus', 'shine']"
3. 样式对象：v-bind:classs="{'focus': true/false, 'shine': true/flase }"，这种方式会根据样式名作为键的值来决定是否采用，如果值为：false，则不采用该样式，否则应用该样式。
4. 对象数组：v-bind:class="[{'focus': true}, {'shine': false}]"
并且类名样式的值还可以绑定数据，用数据来控制样式，从而可以使用响应式样式。

绑定行内样式对象：v-bind:style="styleObj"

绑定内联样式对象，这里不再是直接使用类名，而是直接使用 css 属性，需要注意的是这里需要的数据类型为：对象或者对象数组

比如：

对象形式：v-bind:style="{background:'red'}"

数组形式： v-bind:style="[{background: 'red'}, {fontSize: '22px'}]"

原文：https://blog.csdn.net/gccll/article/details/71814685
查看全文