當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue第一部分(5)：计算属性和过滤器

發(fā)布時間：2025/3/15 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue第一部分(5)：计算属性和过滤器小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

計算屬性

在插值表達式中可以直接使用js表達式，這是非常方便的。但是如果表達式的內(nèi)容很復(fù)雜，就會影響代碼可讀性，而且后期維護起來也不方便，例如下面的場景：需要統(tǒng)計多個商品的總價。
代碼如下：

<div id="app"><h2>總價：{{products.reduce((total,p)=>{return total+p.price*p.count;},0)}}</h2> </div> <script>const vm = new Vue({el:"#app",data:{products:[{name: 'iPhone 7',price: 7199,count: 2},{name: 'iPad',price: 2888,count: 1}]}}) </script>

Vue中提供了計算屬性，來替代復(fù)雜的表達式。通過給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>

計算屬性本質(zhì)就是方法，但是一定要返回數(shù)據(jù)。然后頁面渲染時，可以把這個方法當成一個變量來使用。

過濾器

過濾器的作用是對數(shù)據(jù)進行格式化，比如字母全部大寫、日期格式化輸出、貨幣前添加貨幣符號等場景。Vue.js支持在{{ }}插值的尾部添加一個管道符“（|）”對數(shù)據(jù)進行過濾。過濾的規(guī)則，通過給Vue實例添加選項filters來設(shè)置。

<div id="app"><h2>使用過濾器字母全大寫：{{str | toUpperCase}}</h2><h2>使用過濾器日期格式化：{{date | dateFormat}}</h2><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,...] ) { //邏輯代碼 })

計算屬性和過濾器的異同

相同點：

都基于原始屬性值進行變換
都可以在{{}}中調(diào)用

不同點：

計算屬性可以基于多個原始屬性，而過濾器只對一個原始屬性操作
計算屬性通常用于復(fù)雜的邏輯計算，而過濾器用于簡單的數(shù)據(jù)格式化輸出

案例：購物車

代碼如下：

<body><div id="app"><div style="text-align: center;"><button @click="addFormShow = true;">添加</button></div><hr><div v-if="shoppingList.length > 0"><h2 style="text-align:center">購物列表</h2><table align="center" border="1"><thead><tr><th>編號</th><th>商品</th><th>價格</th><th>數(shù)量</th></tr></thead><tbody><tr v-for="(item,index) in shoppingList"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="increment(index)">+</button><span>{{item.count}}</span><button @click="decrement(index)">-</button></td> </tr></tbody></table><h2 style="text-align: center;">總價：{{totalPrice | priceFormat}}</h2></div><div v-else><h2 style="text-align: center;">購物車空空如也</h2></div><hr><div style="text-align: center;" v-show="addFormShow"><form action="" @submit.prevent="addItem">商品: <input type="text" v-model="shoppingItem.name"> <br>價格：<input type="number" v-model="shoppingItem.price"> <br>數(shù)量：<input type="number" v-model="shoppingItem.count"> <br><input type="submit" value="添加"></form></div></div><script>const vm = new Vue({el:"#app",data:{addFormShow:false,shoppingItem:{},shoppingList:[{name:"macbookair",price:7999.0,count:1}]},methods:{increment(i){this.shoppingList[i].count++;},decrement(i){if(this.shoppingList[i].count <= 1){this.shoppingList.splice(i,1);}else{this.shoppingList[i].count--;}},addItem(){let item = JSON.parse(JSON.stringify(this.shoppingItem));this.shoppingList.push(item);this.shoppingItem={};}},computed:{totalPrice(){return this.shoppingList.reduce((total,item)=>total+item.price*item.count,0);}},filters:{priceFormat(value){return "￥ "+value;}}})</script> </body>

總結(jié)

以上是生活随笔為你收集整理的Vue第一部分(5)：计算属性和过滤器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【三】Java运算符
下一篇： Web前端笔记-解决Vue编写的输入框（