vue的get 和set

迷南。 2022-05-25 12:41 220阅读 0赞

![20180515005832891][]

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <script type="text/javascript">  
      
   document.addEventListener('plusready', function()\{  
   //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"  
     
   \});  
     
    </script>  
</head>  
<body>  
<div id="app">  
<div>\{ \{fullName\}\}</div>  
</div>  
  
<script type="text/javascript" src="js/vue (1).js" ></script>  
<script>  
var vue= new Vue(\{  
el:"\#app",  
data:\{  
firstName:'waj',  
lastName:'jinqiwen'  
\},  
computed:\{  
fullName:\{//fullName是一个计算属性  
get:function  () \{//当取这个属性值的时候get方法会被执行  
return this.firstName +" " +this.lastName;  
\},  
set:function  (value) \{//当设置这个属性值的时候set方法会被执行  
console.log(value);  
\}  
\}  
\}  
\})  
</script>  
</body>

</html>

![20180515011244489][]

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <script type="text/javascript">  
      
   document.addEventListener('plusready', function()\{  
   //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"  
     
   \});  
     
    </script>  
</head>  
<body>  
<div id="app">  
<div>\{ \{fullName\}\}</div>  
</div>  
  
<script type="text/javascript" src="js/vue (1).js" ></script>  
<script>  
var vue= new Vue(\{  
el:"\#app",  
data:\{  
firstName:'waj',  
lastName:'jinqiwen'  
\},  
computed:\{  
fullName:\{//fullName是一个计算属性  
get:function  () \{//当取这个属性值的时候get方法会被执行  
return this.firstName +" " +this.lastName;  
\},  
set:function  (value) \{//当设置这个属性值的时候set方法会被执行  
var arr =value.split(" "); //把设置的fullName打散  
this.firstName = arr\[0\];//把拿到的value值打散，去间接改变f和l的值  
this.lastName =arr\[1\];  
console.log(value);  
//当fullName 所依赖的值发生改变的时候，页面内容也会改变  
\}  
\}  
\}  
\})  
</script>  
</body>  
</html>

[20180515005832891]: /images/20220525/cf476251d5d8415ba05e95f638a16811.png
[20180515011244489]: /images/20220525/94f052db37514a86acb005c891daa1e5.png