五十八、vue中的计算属性，方法和侦听器 -凯发k8官方网
凯发k8官方网
收集整理的这篇文章主要介绍了
五十八、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> <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
总结
以上是凯发k8官方网为你收集整理的五十八、vue中的计算属性，方法和侦听器的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 五十七、vue中的八大生命周期函数
- 下一篇：