Vue-计算属性,Class与Style绑定

以下内容均来自Vue官网:

计算属性和侦听器:

计算属性:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果:
Original message: "Hello"

Computed reversed message: "olleH"

我们声明一个计算属性reversedMessage,提供的函数将用作属性vm.reversedMessage的getter函数:

Class与Style绑定:

我们可以传给v-bind:class一个对象,以动态地切换class:

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

active这个class存在与否取决于数据属性isActive是否为真值(truthy).

我们可以在对象中传入更多属性来动态切换多个class.同时v-bind:class指令也可以与普通的class属性共存.

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

data: {
  isActive: true,
  hasError: false
}
渲染结果:
<div class="static active"></div>

当isActive或者hasError变化时,class列表将相应地更新.

绑定的数据对象不必内联定义在模板里:

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

绑定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>

绑定内联样式:

直接绑定一个样式对象:

<div v-bind:style="styleObject"></div>

样式对象:
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-bind:style的数组语法可以将多个样式对象绑定到同一元素上:

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

truthy:

在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。

JavaScript 中的真值示例如下（将被转换为 true，if 后的代码段将被执行）：

if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)