手把手教你VUE从入门到放弃—— 篇九（vue的计算属性中的get ，set方法的使用）

Vue计算属性详解

最新推荐文章于 2023-04-15 09:17:39 发布

原创最新推荐文章于 2023-04-15 09:17:39 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #get与set方法的使用

本文深入探讨Vue中计算属性的get和set方法的使用，通过示例代码展示了如何自动获取和更新total值，当num1或num2变化时，total会自动调用get方法进行更新。

不多讲，敲下就知道了 ,total通过get方法自动获取，在改变 num1 或者num2时又会自动调用get方法从而改变total

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的计算属性的get，set方法的使用</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <h1>{{num1}}</h1>
       <h1>{{num2}}</h1>
       <h1>{{total}}</h1>
   </div>
   <script>
       var app = new Vue({
           el:'#app2',
           data:{
               num1:0,
           num2:0
               },
           //计算属性返回值实现
           computed:{
               total:{
                   get:function(){
                       return this.num1 +" "+ this.num2;
                   },
                   set:function(total){
                       var arr = total.split(" ");
                       this.num1 = arr[0];
                       this.num2 = arr[1];
                   }
               }
           }
       });
   </script>
</body>

</html>