Vue数据与Class绑定

兼容性

在使用Vue之前先要了解下它能做什么不能做什么。首先，Vue 支持 IE9 及上版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

因为它使用的是对象的getter,setter。这些特性ie9以上才支持，其他非ie系浏览器基本都支持

 

数据绑定

绑定文本：{{绑定键名}}

绑定属性：v-bind:属性名=” 绑定键名” ，它有一种缩写：“:属性名 = 绑定键名”

绑定DOM：v-if=”绑定键名(必须是boolean类型)”

 

Class和Style绑定

绑定HTML Class

我们可以传给v-bind:class一个对象，以动态切换class，至于里面的class是否显示，则又bool值来确定。它有两种显示设置方式：

1. 在HTML中放置键值对

<input type=”button” v-bind:class=”{Active:true}”/>

• 转化为HTML：<input type=”button” class=”Active”/>

1. 在HTML中方式对象键

<input type="button" v-bind:class="classObj">

JS:

…

data:{

       classObj:{

  bg_red:true

}

}

…

 

绑定内联样式

我们可以用v-bind:style来绑定CSS，CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名。但不推荐这种写法。