012_Vue计算属性
生活随笔
收集整理的這篇文章主要介紹了
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计算属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 011_Vue自定义指令
- 下一篇： 013_Vue监听器