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

Question

Let's say i have an HTML of the form:

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

And in my data:

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

My question is that is there any way to pass the variables for this template dynamically from within the html. Looking for something similar in Angular.. Something like this format:

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

Answer 1

I would simply use a method since variables are not being computed:

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

In your template :

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

If those variable are needed to be computed then choose computed instead of methods hook.

Answer 2

There are 3 ways:

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

or better solution:

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

and

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

note that when variable_1 or 2 changes, the greeting updates automatically.

but you can use methods too:

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

with this usage

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

or reactive data as args.