當前位置：
首頁 >
五十八、Vue中的计算属性，方法和侦听器
發布時間：2024/10/8
113
豆豆
生活随笔
收集整理的這篇文章主要介紹了
五十八、Vue中的计算属性，方法和侦听器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2020/10/15
本篇是水篇，記錄前端的學習，爭取早日拿到前端offer
計算屬性，方法和偵聽器
所以，對于任何復雜邏輯，你都應當使用計算屬性。（官方原話）
<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},// 計算屬性 內置緩存 優先computed: {FullName:function(){console.log("計算了一次");return this.FirstName + "" + this.LastName}}// 方法// methods: {// FullName:function(){// console.log("計算了一次");// return this.FirstName + "" + this.LastName// }// },// watch偵聽器// watch: {// FirstName:function(){// console.log("計算了一次");// this.FullName = this.FirstName + "" + this.LastName// },// LastName:function(){// console.log("計算了一次");// this.FullName = this.FirstName + "" + this.LastName// }// },})</script> </body>計算屬性中的Getter和Setter
<body><div id="app">{{FullName}}</div><script>var vm = new Vue({el: "#app",data:{FirstName : "Liu",LastName: "Runsen",},// 計算屬性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>參考：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發
- https://coding.imooc.com/learn/list/203.html
- https://mp.weixin.qq.com/s/ePZnRNPWGWluVBF2z26nAA
總結
以上是生活随笔為你收集整理的五十八、Vue中的计算属性，方法和侦听器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 五十七、Vue中的八大生命周期函数
- 下一篇： 五十九、Vue中的样式绑定