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

Question

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里显示经过计算的值呢？

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

---

原始答案：

在 computed 中用 getter 访问器。

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

https://jsfiddle.net/hugaungj...

Answer 4

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

Answer 5

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