在 vue 的小胡子括号内使用小胡子？

Question

我是 Vue.js 的新手，到目前为止我很喜欢它。我只有一个问题：如何渲染字符串和字符串中的内容？例如：

//…
data:{
string:"hi, {{name}}",
name:"John Doe"
}

{{string}}<!—won’t work —>
<span v-html="string"></span><!—neither this —>

我想在 html 中插入“string”，然后在后面插入“name”。

“Hello {{name}}”应该在 Ajax 调用之后插入，因此不会出现在 HTML 中。

输出应该是“你好，John Doe”。

说清楚，我要的是：

{{string}}
<!-- becomes-->
hi, {{name}}
<!--finally becomes-->
hi, John Doe

Answer 1

使用计算得到的属性到 return 字符串，字符串中包含数据变量；

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app">
    <h1>{{this.stringWithVar}}</h1>
  </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
      name: 'John Doe'
      },
      computed: {
        stringWithVar: function () {
          return `hi, ${this.name}`;
        }
       }
    })
  </script>
</body>
</html>

在 vue 的小胡子括号内使用小胡子？

Use moustache inside moustache brackets in vue?

html

javascript

insert

mustache

vue.js