Twitter CEO：馬斯克決定不加入推特董事會
阿新 • • 發佈：2022-04-11
計算屬性
插值的普通函式，只要頁面一重新整理，函式就會重寫計算，跟函式沒關的值的變化，函式也會重寫計算
把函式當成屬性來用---》只有這個函式使用的屬性(變數)變化，函式才重寫運算
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body><div id="app"> <input type="text" v-model="mytest2">-->{{mytest2}} <br> <input type="text" v-model="mytext">--->{{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}} <br> 函式方式：{{getName()}} <br> 計算屬性:{{getName2}} </div></body> <script> var vm = new Vue({ el: '#app', data: { mytext: '', mytest2: '', }, methods:{ getName(){ console.log("我執行了") return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1) } }, // 8生命週期 computed:{ getName2(){ console.log("計算屬性我執行了") return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1) } } }) </script> </html>
通過計算屬性，重寫過濾案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過濾案例</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <p><input type="text" v-model="myText" placeholder="請輸入要篩選的內容:"></p> <ul> <li v-for="data in newList">{{data}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '#box', data: { myText: '', dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], }, computed:{ newList(){ console.log('我執行了') var datalist2 = this.dataList.filter(item => { return item.indexOf(this.myText) > -1 }) return datalist2 } } }) </script> </html>
通過計算屬性實現名字首字母大寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <!--大段的程式碼寫在這裡不好，使用計算屬性--> {{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}} <p>計算屬性：{{getname}}</p> <!--普通方法要加括號--> <p>普通方法：{{getNameMethod()}}</p> <!--區別是在同一個頁面中使用多次計算屬性，不會多次執行--> </div> </body> <script> var vm = new Vue({ el: '#box', data: { mytext:'lqz', }, computed:{ getname(){//依賴的狀態改變了，會重新計算 console.log('計算屬性') return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1) } }, methods:{ getNameMethod(){ console.log('普通方法') return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1) } } }) </script> </html>