javascript - vue中如何操作两个数据值

Question

在 Vue.JS我有

data() {
  return {
     name: 'John',
     sentence: "Hi my name is {{ name }}",
  };
},

在我的 HTML我有 <h2>{{ sentence}}</h2>但输出是

Hi my name is {{name}}

{{name}}没有被替换。我采用这种方法是因为用户可以从 db 中获取不同的句子。 ，所以名称必须是动态可变的。

Answer 1

定义 sentence作为计算属性:

data(){
   return {
         name: 'John',      
      };
   },
computed:{
   sentence(){
     return  `Hi my name is ${ this.name }`
   }
}

或者您可以在使用正则表达式接收数据时执行此操作:

data(){
   return {
         name: 'John',  
         sentence :  "Hi my name is {{ name }}"  
      };
   },
...
this.sentence = res.data.sentence.replace(/{{.*name.*}}/,this.name);