Javascript 如何在vue中操作两个数据值

在

Vue.JS中

我有

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

在我的

HTML

中

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

{{句子}}

但结果是

嗨，我的名字是{{name}

---

{{name}}

未被替换。我之所以采用这种方法，是因为用户可以从

db

中提取不同的句子，因此名称必须是动态变化的。

将

句子定义为计算属性：

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); 


newvue({
el:“应用程序”，
数据（）{
返回{
姓名：'约翰'，
句子：“嗨，我的名字是{{name}}”，
newSentence:'谢谢{{name}！'
}
},
计算：{
输出（）{
返回this.句子.replace（/{{.*name.*}}/，this.name）
}
},
方法：{
变更句子（）{
this.句子=this.newSentence
this.newSentence='try anything{{name}}'
}
}
})

{{output}}
改变
构建Emīls Gulbis answer的ontop，然后当数据库中的句子发生变化时，您可以使用观察者更新值，如下所示：


观察：{
句子（新值）{
this.句子=newValue.replace（{{name}}），this.name）
}
}
在数据方法返回之前，无法访问{{name}之类的数据属性，而且{{this.name}}将返回未定义的属性

要实现这一点，您需要使用computed属性：

computed:{
   sentence(){
     return  `Hi my name is ${ this.name }`
   }
}

或

直接在模板内部：

<h2>Hi my name is {{ name }}</h2>

你好，我的名字是{{name}

如果sentece是从数据库提交的，那么您不能这样做是的，您是对的，我认为来自数据库的名称没有解决方法吗？您是如何从数据库接收数据的？向数据库发送Get请求，它返回类似以下内容：

很高兴见到您{{name}