Vue第一部分(5)：计算属性和过滤器
生活随笔
收集整理的這篇文章主要介紹了
Vue第一部分(5)：计算属性和过滤器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
計算屬性
在插值表達式中可以直接使用js表達式，這是非常方便的。但是如果表達式的內容很復雜，就會影響代碼可讀性，而且后期維護起來也不方便，例如下面的場景：需要統計多個商品的總價。
代碼如下：
Vue中提供了計算屬性，來替代復雜的表達式。通過給Vue實例添加選項computed來定義計算屬性：
<div id="app"><h2>總價：{{products.reduce((total,p)=>{return total+p.price*p.count;},0)}}</h2><h2>總價：{{totalPrice}}</h2> </div> <script>const vm = new Vue({el:"#app",data:{products:[{name: 'iPhone 7',price: 7199,count: 2},{name: 'iPad',price: 2888,count: 1}]},computed:{totalPrice(){return this.products.reduce((total,p)=>{return total+p.price*p.count;},0);}}}) </script>計算屬性本質就是方法，但是一定要返回數據。然后頁面渲染時，可以把這個方法當成一個變量來使用。
過濾器
過濾器的作用是對數據進行格式化，比如字母全部大寫、日期格式化輸出、貨幣前添加貨幣符號等場景。Vue.js支持在{{ }}插值的尾部添加一個管道符“（|）”對數據進行過濾。過濾的規則，通過給Vue實例添加選項filters來設置。
<div id="app"><!-- 過濾器只有1個參數時，過濾器不需要寫出()，默認傳入|前的數據 --><h2>使用過濾器字母全大寫：{{str | toUpperCase}}</h2><h2>使用過濾器日期格式化：{{date | dateFormat}}</h2><!-- 過濾器有多個參數時，第1個參數仍然是|前的數據，后續的參數需要顯式給出 --><h2>貨幣格式化輸出：{{money | moneyFormat("￥")}}</h2></div><script>const vm = new Vue({el:"#app",data:{str:"hello filter",date:new Date(),money:1000.0},filters:{toUpperCase(value){return value.toUpperCase();},dateFormat(value){let year = value.getFullYear();let month = value.getMonth();let day = value.getDay();let hours = value.getHours();let seconds = value.getSeconds();let minutes = value.getMinutes();return `${year}-${month}-${day} ${hours}:${seconds}:${minutes}`;},moneyFormat(value,symbol){return symbol+" "+value;}}})</script>說明：還可以將過濾器定義為全局過濾器。
Vue.filter('過濾器名稱', function (value[,param1,...] ) { //邏輯代碼 })計算屬性和過濾器的異同
相同點：
- 都基于原始屬性值進行變換
- 都可以在{{}}中調用
不同點：
- 計算屬性可以基于多個原始屬性，而過濾器只對一個原始屬性操作
- 計算屬性通常用于復雜的邏輯計算，而過濾器用于簡單的數據格式化輸出
案例：購物車
代碼如下：
總結
以上是生活随笔為你收集整理的Vue第一部分(5)：计算属性和过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【三】Java运算符
- 下一篇： Web前端笔记-解决Vue编写的输入框（