vue - computed 简单应用

原创已于 2022-05-23 12:35:18 修改 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue

于 2022-05-23 12:34:27 首次发布

vue 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了Vue.js中computed属性的两种用法，包括动态计算结束时间及根据条件返回不同值。通过示例展示了如何在不直接修改data中的属性情况下实现计算逻辑，并强调了computed属性在数据绑定中的作用。

使用computed计算，无需在data中再次定义

用法一：

computed:{
    endTime : {
      get(){
        let a = moment(`${this.date} ${this.startTime}`).format('YYYY-MM-DD HH:mm:ss')
        let endTimeCalc = moment(a).add(this.duration,'minutes').format("HH:mm")
        return endTimeCalc
      },
      set(val){
        this.endTime = val
      }
    },
   
  },

用法二：

computed:{
    form () {
      return {
        title: this.title,
        mark: this.mark,
        date: this.date,
      }
    },
     repeatVal() {
      if (this.repeat == "Daily")
        return "Day"
      else if (this.repeat == "Weekly")
        return "Week"
      else if (this.repeat == "Monthly")
        return "Month"
      else if (this.repeat == "Yearly")
        return "Year"
      else
        return "Day"
    },
  },