Vue笔记——6.Class 与 Style 绑定

小妍Vue笔记——目录

Vue笔记——1.基本语法指令

Vue笔记——2.搭建脚手架并快速创建Vue项目

Vue笔记——3.实例

Vue笔记——4.模板语法

Vue笔记——5.计算属性

Vue笔记——6.Class 与 Style 绑定

Vue笔记——7.条件渲染

Vue笔记——8.列表渲染

Vue笔记——9.事件处理

Vue笔记——10.表单输入绑定

Vue笔记——11.组件

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

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

这种方式是基于类样式名称上的，具体的值可以是

类名： v-bind:class="focus"
类名数组：v-bind:class="['focus', 'shine']"
样式对象：v-bind:classs="{'focus': true/false, 'shine': true/flase }"，这种方式会根据样式名作为键的值来决定是否采用，如果值为：false，则不采用该样式，否则应用该样式。
对象数组：v-bind:class="[{'focus': true}, {'shine': false}]"

并且类名样式的值还可以绑定数据，用数据来控制样式，从而可以使用响应式样式。

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

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

比如：

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

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

v-bind用于class和style时，Vue.js专门增强了它。表达式的结果类型除了字符串以外，还可以是对象或数组。
1、绑定HTML Class

（1）对象语法

如：

new Vue({
        el:'#id1',
        data:{
            isRipe:true,
            isNotRipe:false
        }
    })

渲染为：

注：尽管可以用Mustache标签绑定class，比如class=”{{className}}”，不推荐这种写法和v-bind混用。

   可以直接绑定数据中的一个对象，如：

var vm1 = new Vue({
        el:"#example1",
        data:{
            classObj:{
                'didi-orange':true,
                'didi-green':false
            }
        }
    })

   还可以绑定一个返回对象的计算属性。这是一种常用且强大的模式。如：

<!--绑定一个返回对象的计算属性-->
<div id="example2" v-bind:class="classObj1"></div>

var vm2 = new Vue({
        el:"#example2",
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObj1:function () {
                return {
                    active:this.isActive && !this.error,
                    'text-danger':this.error && this.error.type === 'fatal'
                }
            }
        }
    })

（2）数组语法

如：

<!--数组语法-->
<div id="example3" v-bind:class="[activeClass,errorClass]"></div>

//数组语法
    var vm3 = new Vue({
        el:"#example3",
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })

渲染为：

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

   只有isTrue 为true时才会添加text-danger。

   当有多个条件class时，在Vue.js 1.0.19及以后版本中，可以在数组语法中使用对象语法。如：

2、绑定内联样式

（1）对象语法

如：

aaaaaaaaaa

//绑定内联样式
    var vm4 = new Vue({
        el:"#example4",
        data:{
            activeClass:'red',
            fontSize:30
        }
    })

   直接绑定到一个样式对象，让模板更清晰。如：

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

var vm5 = new Vue({
        el:"#example5",
        data:{
            styleObj:{
                color:'green',
                fontSize:'16px'
            }
        }
    })

   对象语法常常结合返回对象的计算属性使用，如：

<div id="id4" v-bind:style="ddfe"></div>

new Vue({
        el:"#id4",
        data:{
            didiAge:4,
            didiMember:6000
        },
        computed:{
            ddfe:function () {
                return {
                    color: this.didiAge>3 ? 'orange' : 'green',
                    fontSize:this.didiMember>1000 ? '20px' : '10px'
                }
            }
        }
    })

（2）数组语法

  v-bind:style的数组语法可以将多个样式对象应用到一个元素上。如：

<div v-bind:style="[ddfe,didiFamily]"></div>

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

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

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

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

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。
数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
多重值

2.3.0+

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。