格式化动态 html 内容...例如：{{foobar.data}}答案

【问题标题】：Formatting dynamic html content...ex: {{foobar.data}}格式化动态 html 内容...例如：{{foobar.data}}
【发布时间】：2020-11-15 23:58:55
【问题描述】：

我有一些动态 HTML 内容： <td> {{ hash2.transactions}} </td> 在一个 Vue 组件中。我也见过他们叫了很多东西……车把、计算属性、动态内容……也许有人能告诉我最正确的名字是什么？

这里是来自 API 的原始渲染数据：[["3h05YxcE9lmZYNQ7iZVC8ZehEjR3iauz",["Movement Detected"]]]

基本上我只想显示Movement Detected 位。

我尝试了什么

我首先转换为字符串：{{ hash2.transactions.toString() }}，它删除了数组大括号。

然后我尝试按字符编号进行渲染：{{ hash2.transactions.toString()[34, 35, 36, 37, 38, 39] }}

上述尝试的问题是这将只显示第 39 个字符，而忽略前面的字符。

所以我尝试了 concatenation ，这似乎有效，但显然这有点冗长，可能不受欢迎。

<td> {{ hash2.transactions.toString()[33] + hash2.transactions.toString()[34] + hash2.transactions.toString()[35] + hash2.transactions.toString()[36] + hash2.transactions.toString[37] + hash2.transactions.toString[38] hash2.transactions.toString[39] }} </td>

肯定有更体面的方式来做到这一点？希望有人可以权衡并启发我。谢谢。

【问题讨论】：

标签： javascript html arrays vue.js formatting

【解决方案1】：

据我了解，您只想显示“检测到的运动”位
hash2.transaction 返回这个 [["3h05YxcE9lmZYNQ7iZVC8ZehEjR3iauz",["Movement Detected"]]] 作为字符串
好吧，这对我来说看起来像是一个 JSON 你可以这样做
JSON.parse(hash2.transaction)[0][1][0]; 那必须返回“检测到运动”字符串
如果存在则返回错误

你可以这样做

<td> {{ JSON.parse(hash2.transaction)[0][1][0]; }} </td>

【讨论】：

嗨，谢谢，你说的确实有道理，但我收到一个错误：Unexpected token 'h' at position 1 at JSON parse。我会继续玩它
确保您的 hash2.transaction 返回一个类似 [["3h05YxcE9lmZYNQ7iZVC8ZehEjR3iauz",["Movement Detected"]]] 的字符串 + 如果您需要帮助，请确保使用 replace() 转义字符串中的所有双引号跨度>
在遗漏 JSON.parse 时有效 -> hash2.transaction[0][1][0] 再次感谢 :)
很好听！！但是，这意味着 hash2.transaction 是对象本身，而不是 JSON 字符串，这就是您离开 JSON.parse() 时它起作用的原因。