• Vue第四讲

    计算属性

    computed

    当我们需要对原数据（data）进行一些额外的操纵，希望在原数据的基础之上得到一些新数据，但同时又不希望改变原数据，这种情况下，我们会选择用计算属性。

    计算属性的缓存

    首先，先用一段代码演示：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>计算属性</title>
    8. </head>
    9. <body>
    10.     <div id="app">
    11.          <p>{{cnum}}</p>
    12.          <p>{{mnum()}}</p>
    13.          <p>{{cnum}}</p>
    14.          <p>{{mnum()}}</p>
    15.          <p>{{cnum}}</p>
    16.          <p>{{mnum()}}</p>
    17.     </div>
    18. </body>
    19. <script src="js/vue.min.js"></script>
    20. <script>
    21.     new Vue({
    22.         el:'#app',
    23.         data(){
    24.             return {
    25.                  x:10,
    26.                  y:20
    27.             }
    28.         },
    29.         // 计算属性
    30.         computed: {
    31.             cnum(){
    32.                 console.log('computed');
    33.                 return this.x+this.y*this.x-this.y;
    34.             }
    35.         },
    36.         methods:{
    37.             mnum(){
    38.                 console.log('methods');
    39.                 return this.x+this.y*this.x-this.y;
    40.             }
    41.         }
    42.     })
    43. </script>
    44. </html>

    运行结果： 

     从以上结果可以看出，计算属性的结果在第一次计算完成后会缓存下来，在后续的使用，只要原数据没有发生变化，计算属性就不会再重新计算。每一次的使用都是读取缓存中的结果。

    一旦计算属性中依赖的原数据发生变化，计算属性就会重新计算，也就是说，计算属性所对应的方法会重新调用。

    改写Vue案例中的购物车代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>购物车</title>
    9.     <style>
    10.         table {
    11.          border-collapse: collapse;
    12.         }
    13.  
    14.         th,
    15.         td {
    16.             width: 100px;
    17.             height: 50px;
    18.             text-align: center;
    19.         }
    20.     </style>
    21. </head>
    22.  
    23. <body>
    24.     <div id="app">
    25.         <table>
    26.             <thead>
    27.                 <tr>
    28.                     <th>商品编号</th>
    29.                     <th>商品名称</th>
    30.                     <th>商品单价</th>
    31.                     <th>商品数量</th>
    32.                     <th>商品总价</th>
    33.                     <th>商品操作</th>
    34.                 </tr>
    35.             </thead>
    36.             <tbody>
    37.                 <tr v-if="goodsData.every(item => item.count===0)">
    38.                     <td>购物车为空</td>
    39.                 </tr>
    40.                 <template v-for="(item,index) in filterGoodsData">
    41.                     <tr :key="item.id">
    42.                         <td>{{item.id}}</td>
    43.                         <td>{{item.name}}</td>
    44.                         <td>{{item.price}}</td>
    45.                         <td>
    46.                             <button @click="item.count--">-</button>
    47.                             <span>{{item.count}}</span>
    48.                             <button @click="item.count++">+</button>
    49.                         </td>
    50.                         <td>{{item.count*item.price}}</td>
    51.                         <td>
    52.                             <button @click="goodsData.splice(index,1)">删除</button>
    53.                         </td>
    54.                     </tr>
    55.                 </template>
    56.             </tbody>
    57.         </table>
    58.         <p>合计：{{totalPrice}}</p>
    59.     </div>
    60. </body>
    61. <script src="js/vue.min.js"></script>
    62. <script>
    63.     new Vue({
    64.         el: '#app',
    65.         data() {
    66.             return {
    67.                 goodsData: [
    68.                     { id: 1, name: '苹果', price: 20, count: 1 },
    69.                     { id: 2, name: '香蕉', price: 10, count: 2 },
    70.                     { id: 3, name: '橘子', price: 15, count: 4 }
    71.                 ]
    72.             }
    73.         },
    74.         computed:{
    75.             totalPrice(){
    76.                 return this.goodsData.reduce((sum,item)=>{
    77.                     return sum+item.price*item.count;
    78.                 },0)
    79.             },
    80.             filterGoodsData(){
    81.                 return this.goodsData.filter(item=>item.count>0);
    82.             }
    83.         }
    84.       
    85.     })
    86. </script>
    87.  
    88. </html>

    将数量不为0的商品放到新数组中，原数组不变。

    计算属性的 getter 和 setter

    实例：点击按钮改变值

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>计算属性</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <p>{{cnum}}</p>
    14.         <button @click="cnum = 'Li Si'">修改</button>
    15.     </div>
    16. </body>
    17. <script src="js/vue.min.js"></script>
    18. <script>
    19.     new Vue({
    20.         el: '#app',
    21.         data() {
    22.             return {
    23.                xing:'Zhang',
    24.                ming:'Ling'
    25.             }
    26.         },
    27.         // 计算属性
    28.         computed: {
    29.             cnum: {
    30.                 get() {
    31.                     return this.xing +' '+ this.ming;
    32.                 },
    33.                 set(val) {
    34.                     this.xing = val.split(' ')[0];
    35.                     this.ming = val.split(' ')[1];
    36.                 }
    37.             }
    38.         },
    39.     })
    40. </script>
    41.  
    42. </html>

    点击前：                                                              点击后：

                                                   

     

     

  • 相关阅读:
    蓝牙Mesh系统开发五 ble mesh设备增加与移除
    春秋云境靶场CVE-2022-25578漏洞复现(利用htaccess文件进行任意文件上传)
    Redis-Linux中安装Redis、命令操作Redis
    【工作记录】xpath语法笔记
    丁鹿学堂：前端面试手写系列之promise（一）
    黑马头条（day01）
    国际油气公司数字化转型探析
    小程序中如何使用自定义组件应用及搭建个人中心布局
    Python每日一练（牛客数据分析篇新题库）——第30天：逻辑运算
    大模型全情投入，低代码也越来越清晰
  • 原文地址：https://blog.csdn.net/weixin_52993364/article/details/125504465