还是继续入门 demo
这篇博文应该有点长，因为觉得了解了 computed 之后，应该还会继续学下去，所以这里会包含 computed 和 v-bind 的相关学习内容。
computed
什么是计算属性
所有的计算属性都以函数的形式写在 Vue 实例内的computed 选项内，最终返回计算后的结果。
为什么使用计算属性以及如何使用
逻辑过长，会变的臃肿，难以维护。
使用计算属性可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果即可。
如计算一个购物车总价：
计算属性还可以依赖多个 Vue 实例的数据
计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新
我们声明了一个新的 Vue 实例 app2，然后在 app 中的计算属性 prices 中调用 app2 中的属性：
var app2 = new Vue({ ?el:‘#app2‘, ?data:{ ???msg:‘ this\‘s app2‘ ?}})var app = new Vue({ ?el:‘#app‘, ?data:{ ???text:‘123,456,789‘, ???package:[ ?????{ ???????package1:{ ?????????name:‘iphone‘, ?????????price:6900, ?????????count:2 ???????}, ???????package2:{ ?????????name:‘ipad‘, ?????????price:5900, ?????????count:3 ???????} ?????} ???] ?}, ?//定义计算属性 ?computed:{ ???reverseText:function(){ ?????// this 代表了这个 Vue 实例 ?????return this.text.split(‘,‘).reverse().join(‘,‘) ???}, ???prices:function(){ ?????var price = 0 ???????for(let key in this.package[0]){ ?????????price += this.package[0][key].price*this.package[0][key].count ???????} ?????return price + app2.msg ???} ?}})计算属性中的 getter 和 setter
每一个计算属性都包含－个 getter 和一个 setter。
如果计算属性直接跟一个 function，默认的就是 getter ，如上面那几个例子。
如果计算属性设置 getter 和 setter，同时给计算属性设置值的时候，他就会根据 setter 先拿到新数据，处理过之后，再交由 getter 处理：
计算属性和 methods 的区别
调用 methods 里的方法也可以与计算属性起到同样的作用。那他们有什么区别呢？
通过 demo 来理解，使用不同的方法获取时间戳，我们在 methods 中定义一个方法：
methods:{ ???thisTime:function(){ ???????return Date.now() ???}}在 computed 中定义一个属性：
computed:{ ???nowTime:function(){ ???????return Date.now() ???}}在页面中显示出来：
<!--下面使用了 计算属性-->{{ nowTime}}<br><!--下面使用了 methods-->{{ thisTime() }}第一次渲染：
通过给 app.text 重新赋值，再次渲染：
可以看到，在渲染后，通过 methods 获取到的数据发生了改变；而计算属性获取到的数据并没有发生改变。
注意 渲染是渲染，页面刷新是刷新；页面刷新，一定会重新渲染；页面重新渲染，页面不一定要刷新。
methods 方法： 如果是调用方法，只要页面重新渲染。方法就会重新执行，不需要渲染，则不需要重新执行
计算属性：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变，计算属性是依赖于缓存的。
如何选择 methods 和计算属性：
是否需要缓存，需要缓存，选择计算属性；不需要缓存，使用 methods。
小总结
JSbin 代码链接
- 创建以一个vue实例，并使用计算属性和方法实现一个字符串翻转的操作，写出核心代码
HTML:
<div id="app"> ???{{ textReverse() }} ???{{ textReverse2 }}</div>JS:
var app = new Vue({ ???el:‘#app‘, ???data:{ ???????text:‘reverse text‘ ???}, ???methods:{ ???????textReverse:function(){ ???????????return this.text.split(‘‘).reverse().join(‘‘) ???????} ???}, ???computed:{ ???????textReverse2:function(){ ???????????return this.text.split(‘‘).reverse().join(‘‘) ???????} ???}})- 何时使用模板内表达式,何时使用计算属性
当表达式所需的逻辑链较短，数据处理需求不大时，可以使用模板内表达式。
当逻辑链变长，逻辑更为复杂时，使用计算属性。
- 计算缓存 vs Methods，两者的区别
调用 methods 里的方法可以与计算属性起到同样的作用。
他们的区别在于：
methods 方法： 如果是调用方法，只要页面重新渲染。方法就会重新执行，不需要渲染，则不需要重新执行
计算属性：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变，计算属性是依赖于缓存的。
- 代码题
实例化一个vue实例，在data中定义一个姓氏firstName和名字firstName，还有一个全称叫fullName。
提示：fullName = firstName + firstName。
需求：分别使用watch监听器和计算属性来实现以下功能实现，只要姓氏firstName和名字firstName中的任意一个改变，全称fullname就会改变
老师真鸡贼...还没有看到 watch 呐哈哈，还是得去预习一下再做这道题了：
HTML:
<div id="app"> ???{{ fullName }}</div>computed：
var app = new Vue({ ???el:‘#app‘, ???data:{ ???????firstName:‘Zhang‘, ???????lastName:‘da‘, ???????fullName:‘Zhang da‘ ???}, ???computed:{ ???????fullName:{ ???????????get:function(){ ???????????????return this.firstName + ‘ ‘ + this.lastName ???????????}, ???????????set:function(newValue){ ???????????????let name = newValue.split(‘,‘) ???????????????this.firstName = name[0] ???????????????this.lastName = name[1] ???????????} ???????} ???},})watch：
var app = new Vue({ ???el:‘#app‘, ???data:{ ???????firstName:‘Zhang‘, ???????lastName:‘da‘ ???}, ???watch:{ ???????firstName:function(val,oldVal){ ???????????this.fullName = val + ‘ ‘ + this.lastName ???????????console.log(oldVal) ???????}, ???????lastName:function(val,oldVal){ ???????????this.fullName = this.firstName + ‘ ‘ + val ???????????console.log(oldVal) ???????} ???}})v-bind
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
之前在 (1) 已经略微了解过 v-bind，现在来更深入地了解一下他的用法。
绑定 class - 对象
绑定 class 对象语法，对象的键是类名，值是布尔值。
绑定 class - 计算属性
当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性
active 就是类名，他是否会启用，取决于他的值是否为 true。当 this.isActive 为 true 且 !this.isBorder 也为 true 时，这个样式才能显示出来。
绑定 class - 数组
绑定 class 数组，数组中的成员 对应着 类名
数组和对象混用
把对象写入数组中，如：
HTMl:
<div :class=‘[{borderStyle:isActive},"className"]‘></div>JS:
var app = new Vue({ ???el:‘#app‘, ???data:{ ???????isActive:true, ???????className:‘lineStyle‘ ???}})CSS:
.lineStyle{ ???line-height:666px;}绑定内联样式
还可以绑定内联样式：
<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:"30px" ???}}关于 v-bind 的 demo 详见 JSbin
小总结
- 写出本课中v-bind的作用，并分别写出v-bind的变量语法，数组语法，对象语法
作用：通过数据绑定操作元素的 class 列表和内联样式
变量语法： v-bind:class=变量名，变量名在 Vue 实例里的 data 对象内定义，变量的赋值内容则是类名。
数组语法： v-bind:class=[数组成员]，可以绑定多个 class，数组成员可以是对象，如果是对象的话，这个对象的值为 true ，这个 class 才可以会被使用；如果是数组成员是变量，则需要的 Vue 实例里的 data 对象内设置变量，变量的赋值内容则是类名。
对象语法： v-bind:class = {类名:布尔值}，通过判断布尔值，来确定 class 是否被启用。
变量语法
HTML:
<div :href=‘url‘></div>JS:
data:{ ???url:‘http://www.acfun.cn/‘}数组语法
HTML:
<div :class=‘[className1,className2]‘></div>JS:
data:{ ???className1:‘divStyle‘, ???className2:‘borderStyle‘}对象语法
HTML：
<div :class=‘{divStyle:isActive}‘></div>JS:
data:{ ???isActive:true}绑定计算属性:
HTML:
<div :class=‘className‘></div>CSS:
.active{ ???color:red;}JS:
...data:{ ???isActive:true, ???isBorder:true},computed:{ ???className:function(){ ???????return { ???????????active: this.isActive || isBorder ???????} ???}}本篇博文到此结束，主要学习了计算属性 computed 和 v-bind 的一些用法，其实 Vue 的官方文档里面也有相关的教程，但是老师讲得也是十分详细，对照着看很容易理解，多写 demo 也增加了对 Vue 的认识。
Vue.js 创建一个 CNODE 社区(2)
原文地址：https://www.cnblogs.com/No-harm/p/9716024.html