Day 07计算属性computed的使用

作者: 忆曦雪_ | 来源:发表于2019-03-15 12:44 被阅读0次

监听器和计算属性的区别watch,computed
Day 07计算属性computed的使用
计算属性computed vs method
23.compositionApi的computed
Composition API（二）
记录一些前端遇到的问题
computed深入
计算属性
vue 计算属性computed
Swift 方法（Methods）

computed 和methods的区别
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。使用 computed 性能会更好，但是如果你不希望缓存，可以使用 methods 属性。
购物车练习
注意:适应手机端要加一行代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

完整代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> computed购物车练习</title>
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <!-- 通过CDN引入Vue.js -->
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <style type="text/css">
           .container {
               display: flex;
               flex-direction: column;
               font-family: 黑体;
               width: 98%;
               margin: 0 auto;
           }

           .title {
               font-size: 25px;

           }

           .title1 {
               font-size: 30px;

           }

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

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

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

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

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

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

           .count {
               display: flex;
               flex: 1 1 35%
           }

           .goods-count {
               width: 15px;

           }

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



           .butt {
               width: 100px;
               height: 40px;
               color: white;
               border-radius: 10px;
               font-size: 15px;
               background-color: orangered;
               border: 1px solid darkgrey;
               outline: none;
               font-family: 黑体;

           }

           .butt:hover {
               background-color: lightsalmon;
           }

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

           

           .card {
               display: flex;
               justify-content: space-between;
               align-items: center;
           }
       </style>
   </head>
   <body>
       <!-- Vue-app的根容器 -->
       <div id="app">
           <div class="container">
               <span class="title1"><img src="img/applelogo.jpg" />Apple官方旗舰店</span><br>
               <span class="title">商品列表</span><br>
               <div class="item" v-for="goods in goods">
                   <div class="item-id">
                       {{goods.id}}
                   </div>
                   <div class="item-name">
                       {{goods.name}}
                   </div>
                   <div class="item-img">
                       <img :src="goods.img">
                   </div>
                   <div class="item-intro">
                       <a :href="goods.intro">详情</a>
                   </div>
                   <div class="item-price">
                       ¥{{goods.price}}
                   </div>
                   <div class="count">
                       <span>购买:</span>
                       <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="card">
                   <h3>您所选取商品总价：￥{{totalprice}}</h3>
                   <button type="button" class="butt" @click="totalCount()">立即结算</button>
               </div>
               <div class="result" v-if="show">
                   您购买 {{totalCount}}件商品,需要支付总价为：{{totalprice}}元。
               </div>
           </div>
       </div>
       <script type="text/javascript">
           var app = new Vue({
               el: '#app',
               data: {
                   goods: [{
                           id: 1,
                           name: 'iPhone8',
                           price: 3999,
                           count: 1,
                           img: 'img/ipone8.jpg',
                           intro: 'https://item.jd.com/5089267.html'
                       }, {
                           id: 2,
                           name: 'iPhoneX',
                           price: 6349,
                           count: 1,
                           img: 'img/iponeX.jpg',
                           intro: 'https://item.jd.com/5089253.html'
                       },
                       {
                           id: 3,
                           name: 'iPhoneXS ',
                           price: 8258,
                           count: 1,
                           img: 'img/iponeXS-Max.jpg',
                           intro: 'https://item.jd.com/32960766754.html?extension_id=eyJhZCI6IjE3NTUiLCJjaCI6IjIiLCJza3UiOiIzMjk2MDc2Njc1NCIsInRzIjoiMTU1MjQ1MTk5NiIsInVuaXFpZCI6IntcImNsaWNrX2lkXCI6XCJjYTJiMWJhMS1iNDBhLTQyNGYtOGQ0NC1mNjUxYWQ5NzdiYjJcIixcIm1hdGVyaWFsX2lkXCI6XCI4MTUzNTc1NDA4Nzg2NjczNjI5XCIsXCJwb3NfaWRcIjpcIjE3NTVcIixcInNpZFwiOlwiYjNjMTJlMWMtYTk3Mi00MjAxLTg4NzMtYzI0ODNjZDFiZDI3XCJ9In0=&jd_pop=ca2b1ba1-b40a-424f-8d44-f651ad977bb2&abt=0'
                       },
                       {
                           id: 4,
                           name: 'iPhoneXR',
                           price: 5288,
                           count: 1,
                           img: 'img/iponexr.jpg',
                           intro: 'https://item.jd.com/32962088967.html?extension_id=eyJhZCI6IjE3NTUiLCJjaCI6IjIiLCJza3UiOiIzMjk2MjA4ODk2NyIsInRzIjoiMTU1MjQ1MTgwOSIsInVuaXFpZCI6IntcImNsaWNrX2lkXCI6XCI0NzZlZWYwYi1lYzdmLTRiOGEtYTE0MS03MjBjMTNjZjI3YzBcIixcIm1hdGVyaWFsX2lkXCI6XCI4NTg2MzMyNzExNzgzMjA2MTk2XCIsXCJwb3NfaWRcIjpcIjE3NTVcIixcInNpZFwiOlwiYjNjMTJlMWMtYTk3Mi00MjAxLTg4NzMtYzI0ODNjZDFiZDI3XCJ9In0=&jd_pop=476eef0b-ec7f-4b8a-a141-720c13cf27c0&abt=0'
                       }
                   ],
                   show: false
               },
               methods: {},
               computed: {
                   totalprice: function() {
                       var totalprice = 0;
                       for (var i = 0; i < this.goods.length; i++) {
                           totalprice += this.goods[i].price * this.goods[i].count;
                       }
                       return totalprice;
                   },
                   totalCount: function() {
                       alert('恭喜您，购买成功！')
                       this.show = true;
                       var totalCount = 0;
                       var len = this.goods.length;
                       for (var i = 0; i < len; i++) {
                           totalCount += this.goods[i].count;
                       }
                       return totalCount;
                   }
               }
           })
       </script>
   </body>
</html>

运行图演示：

购物车演示.gif

搜索练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>computed练习搜索页面</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style type="text/css">
            .container {
                width: 90%;
                margin: 0 auto;
            }

            .input-box {
                width: 50%;
                height: 30px;
                margin-bottom: 10px;
            }

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

            .item-title {
                flex: 1 1 80%;
                
            }
            a{
                color: black;
                text-decoration: none;
            }
            a:hover{
                text-decoration: underline;
            }
            .item-thumbnail {
                flex: 1 1 20%
            }

            .item-thumbnail img {
                width: 100%;
                height: 100%;
            }
            
        </style>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <input type="text"  v-model="searchString" placeholder="请输入您要搜索的内容..." class="input-box" />
                
                <div class="item" v-for="article in filteredArticles">
                    <a :href="article.url" class="item-title">
                        {{article.title}}
                    </a>
                    <div class="item-thumbnail">
                        <img :src="article.image">
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    searchString: "",
                    // 数据模型
                    articles: [{
                            "title": "堪称神器的3款在线工具，你一定用得上！",
                            "url": "https://www.jianshu.com/p/e83e7999346b",
                            "image": "https://img.haomeiwen.com/i11438996/56b25f32c9307b4b?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
                        },
                        {
                            "title": "经典面试题：从 URL 输入到页面展现到底发生什么？",
                            "url": "https://www.jianshu.com/p/45ba3e0d0c7e",
                            "image": "https://img.haomeiwen.com/i3973862/d90954249a6f6ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"
                        },
                        {
                            "title": "如何免翻墙使用谷歌搜索和Chrome应用商店",
                            "url": "https://www.jianshu.com/p/484f8e6c88f6",
                            "image": "https://img.haomeiwen.com/i858154/015a4b083685a3d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/800/format/webp"
                        },
                        {
                            "title": "四款前所未有好用的黑科技APP，绝对的良心实用，赶紧告诉家人",
                            "url": "https://www.jianshu.com/p/2aec84d269fe",
                            "image": "https://img.haomeiwen.com/i16042993/168b2cb17fd7ec0c?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
                        },
                        {
                            "title": "坚持学英语的方法有哪些",
                            "url": "https://www.jianshu.com/p/0a6a61b0933c",
                            "image": "https://img.haomeiwen.com/i3525704/c7293758fc59e56b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/960/format/webp"
                        }
                    ]
                },
                computed: {
                    // 计算函数，匹配搜索
                    filteredArticles: function() {
                        var articles_array = this.articles,
                            searchString = this.searchString;
                        //搜索关键词为空,则返回原始数据集
                         if (!searchString) {
                            return articles_array;
                        } 
                        //搜索关键词去除无用空格,转换为小写
                        searchString = searchString.trim().toLowerCase();
                        //过滤数组中每个元素,如果
                        articles_array = articles_array.filter(function(item) {
                            if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                                return item;
                            }
                        })
                        // 返回转化后的数组
                        return articles_array;
                    }
                    
                }
            })
        </script>
        </body>
</html>

运行演示：

演示

监听器和计算属性的区别watch,computed
计算属性computed和监听器watch区别？1.能使用计算属性computed的尽量使用计算属性，但是计算属性...
Day 07计算属性computed的使用
computed 和methods的区别我们可以使用 methods 来替代 computed，效果上两个都是一样...
计算属性computed vs method
{{countResult}} //使用computed计算属性 {{countResult()}} //使用m...
23.compositionApi的computed
computed 在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性...
Composition API（二）
computed 在前面我们讲解过计算属性computed，当我们的某些属性是依赖其他状态时，我们可以使用计算属性...
记录一些前端遇到的问题
一、Vue props 使用二、Vue 计算属性 computed 的使用
computed深入
计算属性set/get 计算属性（单向）在computed属性对象中定义计算属性的方法，在页面使用{{方法名}}...
计算属性
1.计算属性get方法：计算属性(computed)和Methods区别:计算属性(computed)适合：有缓...
vue 计算属性computed
computed计算属性对于任何复杂逻辑，你都应当使用计算属性计算属性中的setter 计算属性默认只有 ge...
Swift 方法（Methods）
Method 方法与计算型属性的使用选取 1.优先考虑使用 computed property(计算型属性) ，可...