<div> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })
使用 methods 和 filter 也能达到计算属性同样的效果，但计算属性使模板更加简单清晰（模板中放入太多的逻辑会让模板过重且难以维护）。
计算属性有 计算缓存 的特性，计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而 methods 每次执行都会重新取值。
什么需要缓存？
假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。
getter与setter
计算属性默认为 getter
data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }
也可以添加 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] } } }
watch
使用 watch 来监听data，实时响应数据的变化
例：监听用户输入，显示 正在输入...，输入完成时，显示 请稍等...，并发送异步请求，请求成功里，显示答案
var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 发生改变，这个函数就会运行 question: function (newQuestion) { this.answer = '正在输入...' this.getAnswer() } }, methods: { // _.debounce 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问yesno.wtf/api的频率 // ajax请求直到用户输入完毕才会发出 getAnswer: _.debounce( function () { if (this.question.indexOf('?') === -1) { this.answer = '需要一个问题标识\'?\'' return } this.answer = '请稍候...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) }, // 这是我们为用户停止输入等待的毫秒数 500 ) } })
使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。
四、样式绑定
使用 v-bind:class 与 v-bind:style 来绑定样式
data:()=>{ return { isActive: true, hasError: false, classObj:{ 'active':true, 'align-left':true, }, activeClass: 'active', errorClass: 'text-danger', styleObj:{ color: 'red', fontSize: '13px' }, activeColor: 'red', fontSize: 30, baseStyles:{color: 'red'}, overridingStyles: { fontSize: '20px'} } }
对象语法绑定
class 绑定的是对象的 key，如果对象的值为 true，则绑定 key
style 绑定的整个 对象
绑定 class
<div v-bind:class="classObj"></div> //<div></div> <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> //<div></div>
绑定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <div v-bind:style="styleObj"></div> // <div></div>
数组语法绑定
class 绑定的是数组的 值
style 绑定的是数组中的 对象
<div v-bind:class="[activeClass, errorClass]"> // <div> // 使用三元表达式 <div v-bind:class="[isActive ? activeClass : '', errorClass]"> // 数组语法中使用对象语法 <div v-bind:class="[{ active: isActive }, errorClass]"> //绑定style <div v-bind:style="[baseStyles, overridingStyles]">
五、条件渲染
v-if
切换元素的隐藏和显示 v-if、v-else、v-if-else
切换单个元素
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
切换多个元素
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
多条件判断