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

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

Answer 1

我将使用计算属性来执行此操作。我也可能会将其从输入类型交换为按钮，但是这是如何使用当前输入解决的方法。

movies

Answer 2

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

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

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

虽然不是不正确，但我也建议将v-on:click缩写为@click，将v-bind:value缩写为:value。

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

Answer 3

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

    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>

Vue中的值绑定中的字符串串联

3 个答案: