計算屬性——computed

computed與methods的區(qū)別

  • computed是響應(yīng)式的，methods并非響應(yīng)式。
  • 調(diào)用方式不一樣，computed定義的成員像屬性一樣訪問，methods定義的成員必須以函數(shù)形式調(diào)用。
  • computed是帶緩存的，只有其引用的響應(yīng)式屬性發(fā)生改變時才會重新計算，而methods里的函數(shù)在每次調(diào)用時都要執(zhí)行。
  • computed中的成員可以只定義一個函數(shù)作為只讀屬性，也可以定義get/set變成可讀寫屬性，這點是methods中的成員做不到的
  • computed是以對象的屬性方式存在的，在視圖層直接調(diào)用就可以得到值，例如：<div>{{msg}}</div>，而methods必須以函數(shù)形式調(diào)用，例如：<div>{{msg()}}</div>, 可見，computed直接以對象屬性方式調(diào)用，而methods必須要函數(shù)執(zhí)行才可以得到結(jié)果。

接下來讓我們用實例來詳細(xì)學(xué)習(xí)計算屬行吧

案例一：購物車價格計算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js computed——計算購物車總價</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            .container {
                display: flex;
                flex-direction: column;
                width: 95%;
                margin: 0 auto;
            }

            .item {
                display: flex;
                border: 1px solid #eee;
                border-radius: 10px;
                width: 95%;
                height: 80px;
                margin-bottom: 8px;
                /* 垂直方向居中 */
                align-items: center;
                /* 水平方向居中 */
                /* justify-content: center; */
                padding-left: 10px;
                padding-right: 10px;
            }

            .item-id {
                flex: 1 1 10%;
            }

            .item-name {
                flex: 1 1 20%;
            }

            .item-img {
                flex: 1 1 20%;
            }

            .item-img img {
                width: 50%;
                height: 100%;
            }

            .item-price {
                flex: 1 1 15%;
            }

            .item-count {
                flex: 1 1 35%;
            }

            .goods-count {
                width: 20px;
                text-align: center;
            }

            .settlement {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .btn {
                width: 100px;
                height: 40px;
                background-color: #FF5000;
                border-radius: 10px;
                border: none;
                outline: none;
                color: #FFF;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <div class="item" v-for="goods in goodsList">
                    <div class="item-id">
                        {{goods.id}}
                    </div>
                    <div class="item-name">
                        {{goods.name}}
                    </div>
                    <div class="item-img">
                        <img :src="goods.photo">
                    </div>
                    <div class="item-price">
                        {{goods.price}}
                    </div>
                    <div class="item-count">
                        <button type="button" @click="goods.count-=1" :disabled="goods.count === 0">-</button>
                        <input type="text" class="goods-count" v-model="goods.count" />
                        <button type="button" @click="goods.count+=1">+</button>
                    </div>
                </div>
                <hr>
                <div class="settlement">
                    <h3>總價：￥{{totalPrice}}</h3>
                    <button type="button" class="btn" @click="settlement()">結(jié)算</button>
                </div>
                <div class="result" v-if="show">
                    你購買了{(lán){settlement}}件商品，需要支付總價為：{{totalPrice}}元
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    show: false,
                    goodsList: [{
                        id: 1,
                        photo: 'img/iphone8.png',
                        name: 'iPhone8',
                        price: 6000,
                        count: 1,
                        link: 'https://item.jd.com/6784496.html'
                    }, {
                        id: 2,
                        photo: 'img/xiaomi9.png',
                        name: '小米9',
                        price: 3429,
                        count: 1,
                        link: 'https://item.jd.com/41563312675.html'
                    }, {
                        id: 3,
                        photo: 'img/huawei20.png',
                        name: '華為',
                        price: 5999,
                        count: 1,
                        link: 'https://item.jd.com/100000986050.html'
                    }]
                },
                methods: {},
                computed: {
                    totalPrice: function() {
                        var totalPrice = 0;
                        var len = this.goodsList.length;
                        for (var i = 0; i < len; i++) {
                            totalPrice += this.goodsList[i].price * this.goodsList[i].count;
                        }
                        return totalPrice;
                    },
                    settlement: function() {
                        this.show = true;
                        var totalCount = 0;
                        var len = this.goodsList.length;
                        for (var i = 0; i < len; i++) {
                            totalCount += this.goodsList[i].count;
                        }
                        return totalCount;
                    }
                }
            })
        </script>
    </body>
</html>

結(jié)果圖

image

案例二——搜索頁面，過濾器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js computed練習(xí)-搜索頁面的實現(xiàn)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            .container {
                width: 80%;
                margin: 0 auto;
            }

            .input-box {
                width: 50%;
                height: 45px;
                margin-bottom: 10px;
                border-radius: 10px;
                outline: none;
                border: 1px solid #EEEEEE;
            }

            .item {
                display: flex;
                height: 200px;
                border: 1px solid #eee;
                border-radius: 8px;
                margin-bottom: 8px;
                margin-top: 10px;
            }

            .item-title {
                flex: 1 1 70%;
            }

            .item-thumbnail {
                flex: 1 1 30%
            }

            .item-thumbnail img {
                width: 100%;
                height: 100%;
                border-bottom-right-radius: 5px;
                border-top-right-radius: 5px;
            }

            a {
                text-decoration: none;
                color: black;
            }

            a:hover {
                text-decoration: underline;
                color: #FF0000;
            }

            i {
                position: relative;
                margin-left: -30px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <input id="text" type="text" placeholder="請輸入內(nèi)容:" class="input-box" />
                <i class="icon-search" @click="handleClick()"></i>
                <div class="item" v-for="article in filteredArticles" v-show="show">
                    <a :href="article.url" class="item-title">
                        {{article.title}}
                    </a>
                    <div class="item-thumbnail">
                        <img :src="article.image">
                    </div>
                </div>
                <!-- <div v-show="showNone" class="showNone">
                    沒有搜索到您需要的內(nèi)容
                </div> -->
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    searchString: "",
                    show: true,
                    // showNone: false,
                    // 數(shù)據(jù)模型
                    articles: [{
                            "title": "堪稱神器的3款在線工具，你一定用得上！",
                            "url": "http://www.itdecent.cn/p/e83e7999346b",
                            "image": "https://upload-images.jianshu.io/upload_images/11438996-56b25f32c9307b4b?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
                        },
                        {
                            "title": "經(jīng)典面試題：從 URL 輸入到頁面展現(xiàn)到底發(fā)生什么？",
                            "url": "http://www.itdecent.cn/p/45ba3e0d0c7e",
                            "image": "https://upload-images.jianshu.io/upload_images/3973862-d90954249a6f6ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"
                        },
                        {
                            "title": "如何免翻墻使用谷歌搜索和Chrome應(yīng)用商店",
                            "url": "http://www.itdecent.cn/p/484f8e6c88f6",
                            "image": "https://upload-images.jianshu.io/upload_images/858154-015a4b083685a3d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/800/format/webp"
                        },
                        {
                            "title": "四款前所未有好用的黑科技APP，絕對的良心實用，趕緊告訴家人",
                            "url": "http://www.itdecent.cn/p/2aec84d269fe",
                            "image": "https://upload-images.jianshu.io/upload_images/16042993-168b2cb17fd7ec0c?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
                        },
                        {
                            "title": "堅持學(xué)英語的方法有哪些",
                            "url": "http://www.itdecent.cn/p/0a6a61b0933c",
                            "image": "https://upload-images.jianshu.io/upload_images/3525704-c7293758fc59e56b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/960/format/webp"
                        }
                    ]
                },
                methods: {
                    handleClick: function() {
                        this.searchString = document.getElementById("text").value;
                    }
                },
                computed: {
                    // 計算函數(shù)，匹配搜索
                    filteredArticles: function() {
                        var articles_array = this.articles,
                            searchString = this.searchString;
                        //搜索關(guān)鍵詞為空,則返回原始數(shù)據(jù)集
                        if (!searchString) {
                            // this.showNone = true;
                            return articles_array;
                        }
                        //搜索關(guān)鍵詞去除無用空格,轉(zhuǎn)換為小寫
                        searchString = searchString.trim().toLowerCase();
                        articles_array = articles_array.filter(function(item) {
                            //找到了標(biāo)題還有searchString的文章
                            if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                                return item;
                            }
                        })
                        // 返回轉(zhuǎn)化后的數(shù)組
                        return articles_array;
                    }
                }
            })
        </script>
    </body>
</html>
image
image
image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容