Question

我想将包含多个值的字符串绑定到vuetify中的文本字段。我编写了以下代码，但它为我提供了字符串形式的属性。

<div v-if="textField">
      <v-text-field
      :value="'Our client, {{this.name}}, is {{this.age}} years old.'"
      outline
      readonly
      >
</v-text-field>
</div>

输出为：

Our client, {{this.name}}, is {{this.age}} years old.

虽然我想获取 this.name 和 this.age 值，这些值是 John 和 32 像这样：

Our client, John, is 32 years old.

最好的方法是什么？

Answer 1

使用计算字段。

{
  computed: {
    textFieldMsg() {
     return `Our client, ${this.name}, is ${this.age} years old.`;
  },
}

HTML

<v-text-field
  :value="textFieldMsg"
  outline
  readonly
  >

此外，根据您要对文本字段执行的操作，将确定最适合您的解决方案。 this.name和this.age的值是否根据其他输入字段而变化？这只是页面生命周期中的静态内容吗？等等...

Answer 2

或直接在模板中使用template literals，如下所示：

<v-text-field
  :value="`Our client, ${name}, is ${age} years old.`"
  outline
  readonly
  >

还要注意Mustaches cannot be used inside HTML attributes。也就是说，{{}}不适用于属性。

在Vuetify中将多个属性绑定到文本字段标签

2 个答案: