• Vue学习：计算属性

    计算属性

    我们准备是实现一个加法的计算器,当用户输入了两个数字,我们就得到这两个数字的和,效果图如下:

     

     

    我们可以使用很多方式来实现上述效果:

    第一种: 使用插值实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>Document</title>
    6.     <style type="text/css">
    7.         .num {
    8.             width: 30px;
    9.             height: 20px;
    10.             font-size: 16px;
    11.             font-weight: bold;
    12.         }
    13.  
    14.         .txt {
    15.             font-size: 16px;
    16.             font-weight: bold
    17.         }
    18.     </style>
    19. 	<script src="./js/vue.global.js"></script>
    20. 	<script type="text/javascript">
    21. 	window.onload = function(){
    22. 		const {createApp} = Vue
    23.         createApp({
    24.             data(){
    25.                 return {
    26.                     number1:0,
    27.                     number2:0,
    28.                 }
    29.             },
    30.             methods:{
    31.                 sum:function(){
    32.                     return parseInt(this.number1) + parseInt(this.number2);
    33.                 }
    34.             }
    35.         }).mount("#root")
    36. 	};
    37. 	</script>
    38. </head>
    39. <body>
    40.     <div id="root">
    41.         <input type="number" class="num" v-model="number1"/>
    42.         <span class="txt">+</span>
    43.         <input type="number" size="5" class="num" v-model="number2"  />
    44.         <span class="txt">=</span>
    45.         <span class="txt">{{sum()}}</span>
    46.     </div>
    47. </body>
    48. </html>

    第二种可以使用计算属性来实现:

    计算属性: 就是对Vue对象中的data中的属性进行再加工或者计算得到的属性,我们称为计算属性.在Vue中,我们使用computed来设置计算属性.

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>Document</title>
    6.     <style type="text/css">
    7.         .num {
    8.             width: 30px;
    9.             height: 20px;
    10.             font-size: 16px;
    11.             font-weight: bold;
    12.         }
    13.  
    14.         .txt {
    15.             font-size: 16px;
    16.             font-weight: bold
    17.         }
    18.     </style>
    19. 	<script src="./js/vue.global.js"></script>
    20. 	<script type="text/javascript">
    21. 	window.onload = function(){
    22. 		const {createApp} = Vue
    23.         createApp({
    24.             data(){
    25.                 return {
    26.                     number1:0,
    27.                     number2:0,
    28.                 }
    29.             },
    30.             methods:{
    31.                 
    32.             },
    33.             computed:{
    34.                sum:{
    35.                     get(){  
    36.                         //get方法, 当有人读取计算属性时,该计算属性的get()函数就会执行
    37.                         return parseInt(this.number1) + parseInt(this.number2); //此时的this就是vm
    38.                     }
    39.                }
    40.             }
    41.         }).mount("#root")
    42. 	};
    43. 	</script>
    44. </head>
    45. <body>
    46.     <div id="root">
    47.         <input type="number" class="num" v-model="number1"/>
    48.         <span class="txt">+</span>
    49.         <input type="number" size="5" class="num" v-model="number2"  />
    50.         <span class="txt">=</span>
    51.         <span class="txt">{{sum}}</span>
    52.     </div>
    53. </body>
    54. </html>

    此时我们就实现了两个数的相加,但是我们需要注意一点, 计算属性的get函数在什么时候被调用呢?

    1) 计算属性初次被使用的时候

    2) 所依赖的数据发送变化的时候

    此时有人就好有一个疑问,我们使用插值与计算属性都能实现上述效果,但是它们有什么区别呢?

    区别就是: 插值实现,如果使用多次,不会走缓存,sum()函数会被调用n次,但是使用计算属性,我们的计算属性会进行缓存, 所以使用多次,都不会重复调用get()函数

    我们对计算属性提供了get()方法, 但是我们如果想去修改计算属性,我们也可以提供set()方法, 但是在实际开发中,我们几乎不会对计算属性提供set()方法,这是因为我们的计算属性一般都是为了读取,

    1. computed:{
    2.        sum:{ 
    3.             get(){  
    4.                     console.log('getter...');
    5.                     return parseInt(this.number1) +parseInt(this.number2); 
    6.                   },
    7.               set(value){
    8.                        console.log('setter被调用,计算属性修改成:'+value);
    9.                      }
    10.               }
    11.  }

    很少去修改计算属性.

    计算属性的简写:

    如果计算属性只提供get方法,那我们可以简写如下:

    1. computed:{
    2.  sum(){
    3.          return parseInt(this.number1) + parseInt(this.number2); 
    4.       }
    5. }

  • 相关阅读:
    python 脏话处理、特殊词汇过滤！
    ElasticSearch--分片的路由原理
    神经气体网络（NGN）和不断增长的神经气体网络（GNGN）实现（Matlab代码实现）
    UML活动图
    C高级文件相关指令
    详解 Java 17 中新推出的密封类
    java 利用geotools包对wkt格式数据进行操作
    【开源项目】X-TRACK源码分析
    机器学习实验六：决策树-海洋生物例子
    logback日志是怎么保证多线程输出日志线程安全的
  • 原文地址：https://blog.csdn.net/H215919719/article/details/127667317