Vue.js 基础教程

Vue.js 样式绑定


在开发过程中,我们经常会遇到动态添加类名或直接修改内联样式(例如 tab 切换)。 class 和 style 都是 DOM 元素的 attribute,我们当然可以直接使用 v-bind 对这两个属性进行 数据绑定,例如 <p v-bind:style='style'><p>,然后通过修改 vm.style 的值对元素样式进行 修改。但这样未免过于繁琐而且容易出错,所以 Vue.js 为这两个属性单独做了增强处理,表 达式的结果类型除了字符串之外,还可以是对象和数组。本小节就会对这两个属性具体的用法 进行说明。

class 属性绑定

首先说明的是 class 属性,我们绑定的数据可以是对象和数组,具体的语法如下:
1 对象语法:v-bind:class 接受参数是一个对象,而且可以与普通的 class 属性共存。

<div class="tab" v-bind:calss="{'active' : active , 'unactive' : !active}"> </div>

vm 实例中需要包含 data : {
active : true }

渲染结果为:<div class="tab active"></div>
2 数组语法:v-bind:class 也接受数组作为参数。

<div v-bind:class="[classA, classB]"></div> vm 实例中需要包含
data : {
classA : 'class-a',

classB : 'class-b' }

渲染结果为:<div class="class-a class-b"></div>。

也可以使用三元表达式切换数组中的 class,<div v-bind:class="[classA, isB ? classB : '']"></div>。如果 vm.isB = false, 则渲染结果为 <div v-bind:class="class-a"></div>。 2.内联样式绑定

style 属性绑定的数据即为内联样式,同样具有对象和数组两种形式: 1 对象语法:直接绑定符合样式格式的对象。

<div v-bind:style="alertStyle"></div> data : {
alertStyle : {

  •  color : 'red',

  •  fontSize : '20px' }
    }

    除了直接绑定对象外,也可以绑定单个属性或直接使用字符串。

    <div v-bind:style="{ fontSize : alertStyle.fontSize, color : 'red'}"></div>

    2 数组语法:v-bind:style 允许将多个样式对象绑定到统一元素上。

    <div v-bind:style="[ styleObjectA, styleObjectB]" .></div>

    3.自动添加前缀

    在使用 transform 这类属性时,v-bind:style 会根据需要自动添加厂商前缀。:style 在 运行时进行前缀探测,如果浏览器版本本身就支持不加前缀的 css 属性,那就不会添加。