欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

五十八、Vue中的计算属性，方法和侦听器

发布时间：2024/10/8 vue 115 豆豆
生活随笔 收集整理的这篇文章主要介绍了 五十八、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中的计算属性，方法和侦听器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。