vue 的v-model可以传入computed么?

  1. 我想让v-model的数据经过data的一番处理显示可以做到么?

  2. 我想显示5星级

        <div>
          <x-input title="" @on-focus='showPopupStar' @on-click='showPopupStar' v-model='star' name='eee'
                   placeholder="位置/关键字/品牌/酒店"></x-input>
        </div>
              

data(){
return {
star:5
}
}

然后我这样尝试过都不行,如何处理?

        <div>
          <x-input title="" @on-focus='showPopupStar' @on-click='showPopupStar' v-model='showStar' name='eee'
                   placeholder="位置/关键字/品牌/酒店"></x-input>
        </div>
        
        
        computed:{
            showStar(){
                return this.star+"星级"
            }
        }
              

        <div>
          <x-input title="" @on-focus='showPopupStar' @on-click='showPopupStar' v-model='showStar(star)' name='eee'
                   placeholder="位置/关键字/品牌/酒店"></x-input>
        </div>
        
        
        computed:{
            showStar(e){
                return e+"星级"
            }
        }
  1. 如何在v-model里显示经过计算的值呢?

回答:

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

官方文档:https://vuex.vuejs.org/zh/gui…

回答:

computed 中同时有 getter 和 setter 才能用于 v-model。

你这里只需要显示的话,不需要使用 v-model 吧,仅绑定到 vaule 上就可以了。

回答:

经 @KingMario 提醒,computed 中没有 setter 会导致无法与输入框进行双向绑定。

在正在想怎么加 setter 的时候,突然想起以前也有题主这样的想法,但是换个思路呢,题主可能只是想加个单位在数据后边,完全可以把单位加在输入框外部(毕竟单位是不会参与数据的运算的,哪怕后台要保存带单位的,加个单位扔过去就可以了)。把简单的事想复杂了,被带偏了

clipboard.png


原始答案

computed 中用 getter 访问器。

  computed: {
    showStar: {
      get () {
        return this.star + '星级'
      }
    }
  }

https://jsfiddle.net/hugaungj…

回答:

如果只是对数据的显示进行处理,建议使用filter。
个人认为这个场景并没有使用computed属性的必要

回答:

computed是用来显示计算值,而不是用来计算的。你需要改变的值不是computed定义的而是computed引用的值

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注