Question

当我使用chrome中的dev工具进行检查时，我会在我的页面中看到这个

<span>
 "<b> test data </b>"
</span>

html标签不是这样的。如何修改此字符串以便html标记起作用。数据 "<b> test data </b>" 从$ .Ajax请求传递到服务器。 <b> 标记无法呈现，而我正在获取纯文本。

        var v = new Vue({
    el: ..,
    data : {
        rows: []
    },
    mounted: function() {
     var self = this;
    $.ajax({
           type: 'POST',
           url:  ...,
           data: {},
         contentType: 'application/json; charset=utf-8',
        dataType : 'json',
        success : function(data) {
          var json_data = JSON.parse(data.d);
         self.rows=json_data
        },
        error: function() {}
        })
}
})

我正在按如下方式迭代数据

<tr v-for= "row in rows">
  <td>{{row.question}}</td>
<tr>

更新

这似乎对我有用。任何人都可以告诉这段代码是否有效？

<tr v-for ="row in rows">
  <td> <span v-html="row.question"></span></td>
</tr>

由于

Answer 1

双胡须将数据解释为纯文本，而不是HTML。在为了输出真实的HTML，您需要使用the v-html directive。

Answer 2

如果它来自服务器并且您使用javascript将其添加到DOM，那么您将要设置innerHTML，因为它会将其视为DOM对象。如果设置范围innerText，它会将其视为字符串，并且标记将无法正确呈现。

用＆＃34;包围的html标签＆＃34;没有渲染

2 个答案: