vue开发干货

Vue - computed 应用新场景(改变data中的值)

2019-02-15  本文已影响36人  Skyling

最近项目中(vue + ele)发现计算属性的另外一个场景:

data() {
    return {
      age: 10,
      query: {
        studenId: xx
      },
      rules: {
        studenId: {
          required: true, message: '请xx, trigger: 'change'
        }
      },
  }
}
computed: {
    showType() {
      const result = this.age>10 //依赖于data中的age
      if (!this.query.studenId) { //studenId值为空时,赋默认值
        this.query.studenId = '默认值'
      }
      this.rules.studenId.required = result //动态给studenId的规则required赋值
      return result
    }
  },

ps:针对这个需求可能平时要在生命周期初始阶段赋值一次,还要在age变化的时候watch写重复的代码。所有赋值操作都依赖于age做响应变化,因此想在计算属性的函数中做这个赋值操作即可,欢迎QA~

上一篇下一篇

猜你喜欢

热点阅读