计算属性setter与getter

最新推荐文章于 2022-03-31 14:52:13 发布

jwz934738949

最新推荐文章于 2022-03-31 14:52:13 发布

阅读量416

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/106932265

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

在Vue的计算属性中，默认调用的是getter属性，而当设置了getter与setter属性之后，每调用一次计算属性，就相当于调用一次getter属性；当计算属性的值发生变化时，会默认调用setter属性，进行相应的操作

格式为：

computed: {
  计算属性名称: {
    get: function () {
      get方法
    },
    set: function () {
      set方法
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
</head>
<body>
<div id="app">
  <p>{{menu}}</p>
  <button @click="addDate">日期加1</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      year: 2020,
      month: 6,
      day: 20
    },
    methods: {
      addDate: function () {
        this.day++;
        if (this.day > 31) {
          this.day = 1;
          this.month++;
        }
        if (this.month > 12) {
          this.month = 1;
          this.year++;
        }
        this.menu = this.year + "/" + this.month + "/" + this.day;
      }
    },
    computed: {
      menu: {
        get: function () {
          console.log("get方法");
          return +this.year + "/" + this.month + "/" + this.day;
        },
        set: function (date) {
          console.log("set方法");
          const arr = date.split("/");
          this.year = arr[0];
          this.month = arr[1];
          this.day = arr[2];
        }
      }
    }
  })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
计算属性setter与getter

在Vue的计算属性中，默认调用的是getter属性，而当设置了getter与setter属性之后，每调用一次计算属性，就相当于调用一次getter属性；当计算属性的值发生变化时，会默认调用setter属性，进行相应的操作格式为：computed: { 计算属性名称: { get: function () { get方法 }, set: function () { set方法 } }}<!DOCTYPE html>
复制链接

扫一扫

专栏目录