建立虚拟属性-由状态组合而成
从 文件上面看
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖(比如非响应式属性)在该实例範畴之外,则计算属性是不会被更新的。
在 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设定到实际资料。
监看改变-watch
变数发生变化时侦测触发传入引数-改变后 / 改变前
e.g. 使用者输入 / 改变资料 / 登入… 等
<input v-model="count" />
data:{ count: 10},watch: { count( newValue , oldValue ){ console.log(newValue + "->" + oldValue) //10->15 console.log("值被改变了!") }}
资料来源:动画互动网页特效入门
Vue 手册