从Vue 的新手走路 - computed 学习笔记

建立虚拟属性-由状态组合而成

从 文件上面看

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖(比如非响应式属性)在该实例範畴之外,则计算属性是不会被更新的。

image

在 data 的资料 是这样呈现:
假设我在实体资料存了 价钱 打折和税的资料,
我可能得在 vue 的输出画面 呈现 {{ fullPricediscountfee}}
但是如在很多地方都要放这个计算过后的资料,就会显得很麻烦,
所以虚拟一个资料库 放计算过后的资料(这个资料并不存在,是我们虚拟而成的)
直接叫做 {{price}} 。

data:{ fullPrice:5000, discount:0.8, fee:100}

1.计算价格

 <h3> {{ price }}  </h3>
data:{    fullPrice: 5000,    discount: 0.8,    fee: 100},computed: {    price(){        let temp = this.fullPrice*this.discount        return temp+this.fee   //4100    }}

2.组合名字

 <h3> {{ fullName }} </h3>
 data:{    lastName: "Wang",    firstName: "Lala",    },   computed:{    fullName(){        let fullName = this.lastName+this.firstName;        return  fullName   } }     

3.组合CSS

<h3 :style="themstyle"> text</h3>
data:{    bgColor: "yellow",    textColor: "black",    }, computed:{   themstyle(){     return {       "background-color":this.bgColor,       "color":this.black     }   }

双向计算属性

自订取、给值规则

getter 自订取得的实际运作setter 设定的实际运作
在取得 / 设定时触发额外动作

在模拟层我们经过计算 取出来的值,是我们getter 到的
而我们输入值 fullName 在模拟层经过计算拆成 firstName LastName 放在实际资料库 则是setter,
之前前面的案例,都是getter,那接下来是要教模拟层 帮我们拆解setter设定到实际资料。

image

监看改变-watch

变数发生变化时侦测触发
传入引数-改变后 / 改变前
e.g. 使用者输入 / 改变资料 / 登入… 等
<input v-model="count" />
data:{    count: 10},watch: {    count( newValue , oldValue ){       console.log(newValue + "->" + oldValue) //10->15       console.log("值被改变了!")     }}

资料来源:动画互动网页特效入门
Vue 手册


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章