vue数组分割成字符串_(Vue基础)4.深入Vue计算属性:getter和setter

64419aa598da8649ee4c1d974ba808d4.png

关键词:computed(getter、setter)

注意:split()方法用于把一个字符串分割成字符串数组

一、原始的Vue实例computed

<body>
   <div id="app">
     {{fullName}}
   </div>
   <script>
    var vm = new Vue({
      el: "#app",
      data: {
	firstName: "miya",
	lastName: "Wang"
      },
      computed: {
	fullName: function(){
            return this.firstName + " " + this.lastName
        }
      }
   })
  </script>
</body>

二、计算属性中get和set的使用

将原始的Vue实例中computed里的属性、值改变一下:

1、起初:后台尝试测试了一下set的传值,发现value值指向fullName这个计算属性

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      firstName: "miya",
      lastName: "Wang"
     },
    computed: {
      fullName: {
	get: function(){
          return this.firstName + " " + this.lastName
        },
        set: function(value){ 
           console.log(value)     	
	}
     }
    }
  })
</script>

如图:第一个sussie li是console.log打印出的value值,第二个是sussie li 则是vm.fullName返回的结果。

59a256b50060faa71638a2c1e7a5edd0.png

2、然后,看看set是如何设置fullName的值?

当set时,value值是指向fullName这个计算属性。我们会把数组赋值给firstName和lastName。而当计算属性fullName所依赖的值firstName和lastName发生改变时会重新计算。

当你set这个fullName时,firstName和lastName发生变化,恰好是fullName所依赖的值,就会引起fullName的重新计算,fullName变了,页面上的fullName也就跟着变了

注意:split()方法用于把一个字符串分割成字符串数组

<body>
  <div id="app">
    {{fullName}}
  </div>
  <script>
   var vm = new Vue({
    el: "#app",
    data: {
      firstName: "miya",
      lastName: "Wang"
    },
    computed: {
     fullName: {
      get: function(){
        return this.firstName + " " + this.lastName
      },
      set: function(value){ 
        var arr = value.split(" ");//将fullName这个字符串用空格将其打散
        this.firstName = arr[0];
        this.lastName = arr[1];
       }
     }
    }
  })
 </script>
</body>

三、总结

1、get:通过设置get方法可以得到fullName的新值
2、set:通过set的方法,设置一个值(value)来改变fullName相关联的值,引起fullName重新的计算,相应的页面上fullName也会发生改变成新的内容。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值