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

vue

012_Vue计算属性

发布时间：2025/5/22 vue 69 豆豆

生活随笔收集整理的这篇文章主要介绍了 012_Vue计算属性小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 为何需要计算属性?

1.1. 表达式的计算逻辑可能会比较复杂, 使用计算属性可以使模板内容更加简洁。

1.2. 计算属性用法

computed: {reverseString: function(){return this.msg.split('').reverse().join('');} }

1.3. 计算属性有缓存。

2. 计算属性例子

2.1. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>计算属性</title></head><body><div id="app"><div>{{msg}}</div><hr /><div>计算属性:</div><div>{{reverseString}}</div><div>{{reverseString}}</div><hr /><div>方法:</div><div>{{reverseMethod()}}</div><div>{{reverseMethod()}}</div><hr /><div>求和:</div><div>{{sum}}</div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {msg: 'Nihao',num: 100},methods: {reverseMethod: function(){console.log("方法没有缓存");return this.msg.split('').reverse().join('');}},computed: {reverseString: function(){console.log("计算属性有缓存");return this.msg.split('').reverse().join('');},sum: function(){// 比较耗时的操作可以使用计算属性var total = 0;for(var i = 0; i <= this.num; i++){total += i;}return total;}}});</script></body> </html>

2.2. 效果图

总结

以上是生活随笔为你收集整理的012_Vue计算属性的全部内容，希望文章能够帮你解决所遇到的问题。

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

属性
_vue