有什么方法可以使用 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>

或反應數據作為參數。