vue学习---Class 与 Style 绑定

in Vue教程 with 0 comments, 4116 views

vue

操作元素的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会自动侦测并帮我们自动添加对应的前缀（😃很贴心）。

Responses ${replyToWho} / Cancel Reply