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

【问题标题】：Is there any way to pass parameters to a binded variable in Vue.JS with moustache syntax有什么方法可以使用 mustache 语法将参数传递给 Vue.JS 中的绑定变量
【发布时间】：2020-05-31 15:54:59
【问题描述】：

假设我有一个 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>

【问题讨论】：

标签： javascript html vue.js vuetify.js

【解决方案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>

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

【讨论】：

【解决方案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>

或作为参数的反应数据。

【讨论】：