Vue中值绑定中的字符串连接

Question

我刚刚开始学习 Vue ，所以这可能是个愚蠢的问题。我创建了一个 Vue 组件，想在值绑定中进行字符串连接。

像这样。

 Vue.component('button-counter',{
    data:function(){
        return { count : 0}
    },
    template:"<input type='button' v-on:click='count++' v-bind:value='"Total Counter :"+count'/>"
})

但这似乎是错误的语法。任何人都可以帮助我如何实现这一目标。

例如，还有另一种方法可以做到这一点，例如：

 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

但是是否可以使用值绑定来实现呢？

原文由 Programmer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会用计算属性来做到这一点。我也可能会将其从输入类型交换为按钮，但这里是如何使用当前输入解决问题。

 new Vue(({
  el: "#app",
  data:function(){
    return { count : 0}
  },
  computed: {
    buttonText() {
      return "Total Counter : " + this.count;
    }
  },
  template:"<input type='button' v-on:click='count++' v-bind:value='buttonText'/>"
}))

原文由 Austio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如另一个答案中已经指出的那样，您可以使用计算属性来完全删除表达式，但这并不是让您的代码正常工作所必需的。如果您一直在使用单个文件组件，那么您的模板就可以正常工作。这里的“错误语法”是为您的模板使用双引号字符串文字的结果，导致嵌套双引号。

双引号需要用斜杠转义。这与 Vue 无关，它是原始 JavaScript：

 template:"<input type='button' v-on:click='count++' v-bind:value='\"Total Counter :\"+count'/>"

While not incorrect, I would also suggest abbreviating v-on:click to @click and v-bind:value to :value .

 template: "<input type='button' @click='count++' :value='\"Total Counter :\" + count'/>"

原文由 skirtle 发布，翻译遵循 CC BY-SA 4.0 许可协议