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

最新推荐文章于 2023-10-23 18:32:52 发布

闻人奚

最新推荐文章于 2023-10-23 18:32:52 发布

阅读量1.8k

点赞数

文章标签： vue数组分割成字符串

本文链接：https://blog.csdn.net/weixin_42393929/article/details/113490214

版权

关键词：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返回的结果。

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>