有什么方法可以使用 mustache 语法将参数传递给 Vue.JS 中的绑定变量

Question

假设我有一个表单的 HTML：

<div>
  {{ GREETING_MESSAGE_FROM_TO }}
</div>

在我的数据中：

data() {
  return {
      GREETING_MESSAGE_FROM_TO: 'Hello this message is for {{variable_1}} from {{variable_2}}'
  }
}

我的问题是有什么方法可以从 html 中动态传递此模板的变量。 在 Angular 中寻找类似的东西.. 像这样的格式：

<div>
  {{ GREETING_MESSAGE_FROM_TO | [variable_1, variable_2] }}
</div>

Answer 1

我会简单地使用一种方法，因为没有计算变量：

methods:{
   GREETING_MESSAGE_FROM_TO(variable_1, variable_2){
      return `Hello this message is for ${variable_1} from ${variable_2}`
   }
}

在您的模板中：

<div>
  {{ GREETING_MESSAGE_FROM_TO(props1, props2) }}
</div>

如果需要计算这些变量，则选择计算而不是方法挂钩。

Answer 2

有3种方式：

data() {
  return {
      variable_1: 'Sam',
      variable_2: 'Alex',
      GREETING_MESSAGE_FROM_TO: `Hello this message is for ${this.variable_1} from ${this.variable_2}'
  }
}

或更好的解决方案：

data() {
  return {
      variable_1: 'Sam',
      variable_2: 'Alex'
  }
},
computed() {
      GREETING_MESSAGE_FROM_TO: `Hello this message is for ${this.variable_1} from ${this.variable_2}'
}

和

<div>
  {{ GREETING_MESSAGE_FROM_TO }}
</div>

请注意，当 variable_1 或 2 更改时，问候语会自动更新。

但你也可以使用方法：

methods: {
      GREETING_MESSAGE_FROM_TO: function (variable_1, variable_2) {
          return `Hello this message is for ${variable_1} from ${variable_2}'
    }
}

这种用法

<div>
  {{ GREETING_MESSAGE_FROM_TO('Sam', 'Alex') }}
</div>

或反应数据作为参数。