vue 复习（2）v-bind的应用 v-bind:classv-binf:style

dasdclass与style绑定v-bind

1. 绑定HTML Class
对象语法

有些时候我们想动态的切换class的类名。在原生的js或jq中我们就要通过事件来动态的改变class类名，但在vue中我们可以通过v-bind:class 来实现这一功能。
列
<div v-bind:class="{ active: isActive }"></div>
data:{
isActive:false,
}
这其中class类名是否存在active取绝于data 中isActive的值为。
isActive为false 的时候就不存在。为true时就存在
想动态的切换多个class类名时

列

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

data: { isActive: true, hasError: false}
如上执行下来class的类名就为“static，active”。
当data中isActive,hasError值进行变化时class类名也会进行相应的变化。
也可以把多个对象直接定义在一个对象里。
如
<div v-bind:class="classObject"></div>
data: { classObject: { active: true, 'text-danger': false }}
结果和上面的列子一样。

data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } }}
也可以将这个写在计算属性里面。

当我们新建一个组建也可以在组建上用该方法绑定class类名
列
Vue.component('my-component', { template: '<p class="foo bar">Hi</p>'})

<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>
truthy：在{{Glossary("JavaScript")}}中，Truthy(真值)指的是在{{Glossary("Boolean")}}上下文中转换后的值为真的值。所有值都是真值，除非它们被定义为 {{Glossary("Falsy", "falsy")}} (即， 除了false，0，“”，null，undefined和NaN 外)。

2绑定内联样式
直接看官网例子
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: { activeColor: 'red', fontSize: 30}
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

也可以直接绑定到一个对象上
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' }}
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。