一、计算属性 computed

1.例子

<div id="app">
  <div>{{message}}</div>
  <div>{{revermessage}}</div>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello,wolrd'
    },
    computed: {
      revermessage: function() {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

声明一个计算属性severmessage，在computed中被指向对message进行一些方法操作后的返回值

此时vm.severmessage依赖于vm.message的变化，对message改变数据，会引起severmessage的更新

2.计算属性缓存和方法

还可以通过在表达式中调用方法来达到想要的效果

<div id="app">
  <div>{{message}}</div>
  <div>{{revermessage()}}</div>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello,wolrd'
    },
    methods: {
      revermessage: function() {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

经过测试，两者的结果是一样的

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的

区别是：计算属性是基于他们的响应式依赖进行缓存的，只有当响应式依赖，也就是message发生改变时才会重新求值，就意味着，只要message还没改变，多次访问revermessage计算属性只会返回之前计算结果的缓存，而不是直接执行计算属性的函数

而方法，在每次触发重新渲染时，调用方法都会执行一次函数，这就多了一份开销

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代

3.计算属性和侦听属性

vue 还有一种方式来观测 vue 实例上的数据变动：侦听属性－－watch

<div id="app">
  {{fullname}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstname: 'a',
      lastname: 'b',
      fullname: 'ab'
    },
    watch: {
      firstname: function(val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastname: function(val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
  })
</script>

使用过程是极其繁琐且重复的，再来用计算属性试一下

<div id="app">
  {{fullname}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstname: 'a',
      lastname: 'b'
    },
    computed: {
      fullname: function() {
        return this.firstname + this.lastname
      }
    }
  })
</script>

很简单快速的就得到了我们想要的函数表达式

4.计算属性的 setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在在控制台输入vm.fullName = 'John Doe'，页面会响应，并且setter会被调用，vm.firstname和vm.lastname也会相应地被更新

二、绑定 class 和 style

1.对象语法

可以给v-bind:class传入一个对象，动态的切换class

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

可以通过控制ok的布尔值来动态的控制 class

还可以创建多个字段，并且不影响普通的className的存在

html:

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

data:

data{
  isActive: true,
  hasError: false
}

结果为：

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

当isActive或者hasError变化时，class 列表将相应地更新。例如，如果hasError的值为true，class 列表将变为"static active text-danger"。

绑定的数据对象也不必直接写在内联模板里

<div id="app">
  <div v-bind:class="classobject"></div>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      classobject: {
        active: true,
        'text-danger': true
      }
    },
  })
</script>

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

如果className有特殊符号，必须加上引号''，或者""

2.数组语法

我们可以把一个数组传给v-bind:class，以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

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

3.用在组件上

当在一个自定义组件上使用classproperty 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

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

然后在使用的使用的时候添加了一些class：

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

html 将会被渲染成：

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

对于带数据绑定的class也同样适用

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

当isActive为 truthy 时，HTML 将被渲染成为：

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

4.绑定内联样式 style

v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式或带引号的短横线来命名

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

js:

data: {
  activeColor: 'red',
  fontSize: 30
}

或者直接绑定到一个对象，会让模板更加清晰

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

js:

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

也可以将多个对象应用到一个元素上

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

自动添加前缀

当v-bind:style需要使用浏览器前缀的时候，如：-webkit-等，vue 会自动侦测并帮生成相应的前缀