javascript - 页面显示纯 html 文本而不是呈现 html 表格

Question

我想通过将 html 文本分配给一个变量并返回该变量并以如下所示的 json 数组格式传递 html 代码来显示 html 表格。

[{
  "fruit": "apple",
  "flower": "jasmine",
  "capacity": "0",
  "flavor": "jasm",
  "numbers": "1",
  "nic": "1",
  "ram": "4",
  "source": "flower",
  "details": "<table  id=\"details-0\" class=\"table-striped\"><tr><td>type</td><td>static</td></tr><tr><td>template_name</td><td>gold-sti-rh74-stage-use-only</td></tr><tr><td>template_guid</td><td>ec5c9b84c8857bfa91d11d1527250bf7</td></tr><tr><td>flavor</td><td>m1.Small</td></tr><tr><td>num_cpu</td><td>1</td></tr><tr><td>ram</td><td>4</td></tr><tr><td>num_nic</td><td>1</td></tr></table>",
  "id": 0
}]

但是当页面加载时，我得到了带有 tr> 等的纯 html 文本......并且我没有得到表格格式。请帮我解决这个问题。

var _list_data = [];
var details = '<table  id="details-'+i+'" class="table-striped">';

          details += '<tr><td>type</td><td>static</td></tr><tr><td>template_name</td> </tr>';
      details += '</table>';

      _list_data['details'] = (details);
    return _list_data;

这将返回页面中的纯 html 代码。我需要将其设置为正确的表格格式。 我们可以在 vue js 中使用 v-html，但此响应将发送到库。我们如何通过添加 v-html 来编辑库文件，这不应该是正确的方法吗？我很困惑。

var _list_data = [];
var details = '<table  id="details-' + i + '" class="table-striped">';
details += '<tr><td>type</td><td>static</td></tr><tr><td>template_name</td> </tr>';
details += '</table>';

_list_data['details'] = (details);
return _list_data;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

尝试使用v-html而不是 {{}}。

<div v-html="_list_data[0]['details']"></div>