五十八、Vue中的计算属性，方法和侦听器
生活随笔
收集整理的這篇文章主要介紹了
五十八、Vue中的计算属性，方法和侦听器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
@Author：Runsen
@Date：2020/10/15
本篇是水篇，記錄前端的學(xué)習(xí)，爭(zhēng)取早日拿到前端offer
計(jì)算屬性，方法和偵聽器
所以，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。（官方原話）
<body><div id="app">{{FullName}}<!-- 方法使用的{{FullName()}} -->{{age}}</div><script>var vm = new Vue({el : "#app",data:{FirstName : "Liu",LastName: "Runsen",FullName: "Liu Runsen",age: 21},// 計(jì)算屬性 內(nèi)置緩存 優(yōu)先computed: {FullName:function(){console.log("計(jì)算了一次");return this.FirstName + "" + this.LastName}}// 方法// methods: {// FullName:function(){// console.log("計(jì)算了一次");// return this.FirstName + "" + this.LastName// }// },// watch偵聽器// watch: {// FirstName:function(){// console.log("計(jì)算了一次");// this.FullName = this.FirstName + "" + this.LastName// },// LastName:function(){// console.log("計(jì)算了一次");// this.FullName = this.FirstName + "" + this.LastName// }// },})</script> </body>計(jì)算屬性中的Getter和Setter
<body><div id="app">{{FullName}}</div><script>var vm = new Vue({el: "#app",data:{FirstName : "Liu",LastName: "Runsen",},// 計(jì)算屬性computed: {// // FullName:function(){// return this.FirstName + "" + this.LastName// }FullName:{get:function(){return this.FirstName + "" + this.LastName},set:function(value){// console.log(value);var arr = value.split(" ")this.FirstName = arr[0]this.LastName = arr[1]} }},})</script> </body>參考：慕課網(wǎng)Vue2.5->2.6->3.0 開發(fā)去哪兒網(wǎng)App 從零基礎(chǔ)入門到實(shí)戰(zhàn)項(xiàng)目開發(fā)
- https://coding.imooc.com/learn/list/203.html
- https://mp.weixin.qq.com/s/ePZnRNPWGWluVBF2z26nAA
總結(jié)
以上是生活随笔為你收集整理的五十八、Vue中的计算属性，方法和侦听器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 五十七、Vue中的八大生命周期函数
- 下一篇： 坦克300后保险杠可以踩吗