当我坐在那架破旧古钢琴旁边的时候,我对 最幸福的国王也不羡慕。—— 海顿

vue学习---Class 与 Style 绑定

操作元素的class列表和内联样式是我们在数据绑定时的一个常见需求。由于它们都是属性,所以我们可以用v-bind指令来处理它们:只需要计算出表达式最终的字符串值。 不过,字符串的拼接往往麻烦又容易出错,幸运的是,Vue已经帮我们想到了,内部专门针对这两个属性进行的相应的增强,表达式的计算结果除了普通的string外,还可以是对象字面量和数组。

绑定HTML Class

对象语法(Object Syntax)

我们可以传递一个对象给v-bind指令,从而达到动态切换class的功能。

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

其中绑定的对象字面量表达式{active:isActive}表示active会做为一个class绑定到div上,是否出现取决于isActive的真或假,isActive可以是一个简单的布尔值,甚至也可以是一个“计算属性”,这使得它异常强大,我们可以利用它来做很多事情。

当然,你也可以在表达式里定义多个class类,从而达到控制多个类的切换。此外,v-bind:class指令也可以和原本HTML的class属性共存(不得不说Vue是相当优雅的😀)就像下面这样:

模板:

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

数据:

data: {
  isActive: true,
  hasError: false
}

最终渲染结果:

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

同时它必须也得是响应式的,当isActive和hasError的值发生变化时,最终渲染的HTML的class也会相应变化,如果你觉得在模板里直接写对面字面量有些蓝瘦香菇😭 你甚至可以用一个变量代替,然后放在Data中来书写,最终结果都是一样的。

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

顺便再放个结合计算属性的例子:

<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)

我们可以传数组给v-bind:class指令,从而应用一个class列表。

<div v-bind:class="[activeClass, errorClass]">
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染结果:

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

如果你想根据条件来切换列表的class,可以使用三元表达式:

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

上边的代码中,div总会应用errorClass这个class,而activeClass这个class则会根据isActive的真假来决定。不过当需要定义多个class时,这样写就显得比较繁琐,而且也难阅读,所以Vue允许我们在数组语法中使用之前介绍的对象语法

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

在组件中的体现(with components)

由于我们还没有细讲组件的相关知识,看不懂以下内容可以完全跳过,等以后熟悉了再回头翻阅一下。 当你在一个自定义的组件中使用class属性时,这些class会直接应用到这个组件的根元素上,组件现有的class并不会被覆盖,举个例子:

定义组件:

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

在组件上添加class

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

最终结果:

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

如果v-bind:class:

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

当isActive为true时:

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

绑定内联样式

对象语法(Object Stynax)

v-bind:style的对象语法非常直观,除了它本质是一个js对象外,几乎和css样式的写法一模一样。 你可以用驼峰式(camelCase)或短横分隔命名(kebab-case)CSS 的各个属性:

<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'
  }
}

同样的,内联样式的对象语法也常常结合计算属性使用。

数组语法

数组语法允许我们在同一个元素上应用多个style对象。

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

自动添加前缀

这个特性也不错,当你使用v-bind:style书写的样式需要添加浏览器厂商的私有前缀时,Vue会自动侦测并帮我们自动添加对应的前缀(😃很贴心)。

分享

分享本文章

文章来源
164010

2016-11-25

标签

vue

right left pencil2 css3 node design eye tags search rss back user pacman film