6.Class bind with Style

Operating elements of class lists and inline style is a common demand for data binding .

Because they are property, so we can  v-bind deal with them: just need to figure out the string can result through expression.

However, string concatenation cumbersome and error-prone. Therefore, when  v-bind used  and  when, Vue.js do a special enhancements. classstyle 

In addition to the result of the expression of type string, and it may be an object or an array.

 

Binding HTML Class

 

Object syntax

Single class

We can pass  v-bind:class an object to dynamically switch class :

<div v-bind:class="{ active: isActive }"></div>

 

The syntax above represents  active the presence or absence of data will depend on the properties of this class  isActive of  truthiness.

 

More clss value

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

 

And the following data:

Date : { 
  isActive: true , 
  hasError: false 
}

The results are rendered as:

<div class="static active"></div>

 

When  isActive or  hasError changes, class list will be updated accordingly.

For example, if  hasError the value  true, class list becomes  "static active text-danger".

 

Binding data object (judgment)

Binding data objects need not defined inline in a template:

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

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

Binding a returned object computed attribute

Rendering the results the same as above. Here we can also bind a target return of computing property . This is a common and powerful pattern:

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

 

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

Array syntax

We can pass an array  v-bind:classto apply a class list:

<div v-bind:class="[activeClass, errorClass]"></div>

 

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

 

Rendered as:

<div class="active text-danger"></div>

 

If you want to switch according to the conditions in the list of class, you can use a triplet of expressions:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

 

Write will always add  errorClass, but only in  isActive a truthy   when you add  activeClass.

However, when there are multiple conditions class when written somewhat cumbersome. It can also be used in an array of object syntax syntax:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

Used in the assembly

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

 

例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

 

然后在使用它的时候添加一些 class：

<my-component class="baz boo"></my-component>

 

HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

 

对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

 

当 isActive 为 truthy^[1] 时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>

 

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。

CSS 属性名可以用驼峰式 (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 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

 

多重值

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

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

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

 

In JavaScript, truthy (true value) refers in the context of a Boolean value, true value of the converted values. 
   All values are true value, unless they are defined as a false value (that is, except false, 0, "" , other than null, undefined and NaN are true value). 

Casts using JavaScript (coercion) in the Boolean context. 

True value example JavaScript as follows (will be converted to true, IF after the code block will be executed): 

IF (to true)
 IF ({})
 IF ([])
 IF (42 is )
 IF ( " foo " )
 IF ( a Date new new ())
 IF (-42 )
 IF (3.14 )
 IF (-3.14 )
 IF (Infinity)
 IF (-Infinity)