[VueJS使用v-html渲染html字符串内的属性

Question

我有一个从编辑器获取并存储在数据库中的html字符串。

<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>{{user}}</p>

我想从数据库中检索它并将其呈现为HTML。当我使用v-html时，它将呈现为：

<v-card-text v-html="content"></v-card-text>

用户个人资料：

{{user}}

如果我具有这样的数据属性，如何从数据属性呈现{{hello}}：

data() {
        return {
            user: "Lim Socheat",
            content:"<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>{{user}}</p>"
        };
    },

预期结果：

用户个人资料：

Lim Socheat

因为{{{user}}将呈现为Lim Socheat

Answer 1

使内容成为计算属性。然后像这样使用它：

  computed: {
    content() {
       return '<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>' + this.user + '</p>';
    }
  }

您可以通过这种方式使用数据中定义的所有变量。

更新：在这种情况下，您需要替换变量。

  computed: {
    content() {
      // keep a map of all your variables
      let valueMap = {
        user: this.user,
        otherKey: 250
      };
      let value = '<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>{{user}}</p>';
      let allKeys = Object.keys(valueMap);
      allKeys.forEach((key) => {
        var myRegExp = new RegExp('{{' + key + '}}','i');
        value = value.replace(myRegExp, valueMap[key]);
      });
      return value;
    }
  }