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

我刚刚开始学习

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'/>"
})

Vue.component（'button-counter'{
数据：函数（）{
返回{count:0}
},
模板：“”
})

但这似乎是错误的语法。谁能帮助我实现这一目标

在示例中，还有另一种方法，例如：

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

template:'您单击我{{count}}次。'
})

---

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

我将使用计算属性来执行此操作。我可能也会把它从一个输入类型换成一个按钮，但这里是如何解决当前输入

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'/>"
}))

newvue(({
el:“应用程序”，
数据：函数（）{
返回{count:0}
},
计算：{
buttonText（）{
return“Total Counter:+this.count；
}
}, 
模板：“”
}))

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

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

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

---

您只需转义双引号，这是因为您的模板被双引号包围

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

模板：“

如果是在这样的模板中，你不必逃避

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

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