javascript - VueJS 打印 HTML 到页面

标签 javascript html string vue.js

我有一个属性,其中包含一个 HTML 字符串作为其属性之一。

当我尝试将其打印到模板中的页面时,它实际上打印了 HTML。所以文本包含 HTML 标签,它本身不会被浏览器解释为 HTML。

我该如何解决这个问题?

模板:

<div class="description">
    {{ property.description }}
</div>

输出:

<p>Suscipit est aut molestiae provident quis magnam.</p> <p>Nesciunt iure impedit sint iste.</p> <p>Aspernatur repudiandae laborum dolor harum magnam officiis ad nihil.</p> <p>Non deserunt rerum adipisci voluptates est eos et.</p> 

最佳答案

现在我们使用的是 Vue2,这发生了轻微的变化。根据docs我们需要使用 v-html 指令。

例如,我制作了一个加载按钮,如下所示:

<button type="submit" v-html="loading ? loadingText : 'Login'">

其中变量代表:

data: function (router) {
  return {
    loading: false,
    loadingText: '<i class="fa fa-spinner fa-spin"></i> Loading...',
  }
}

这会产生:

enter image description here

并且当loading状态变为true

enter image description here

关于javascript - VueJS 打印 HTML 到页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38687645/

相关文章:

javascript - 为什么jQuery显示&隐藏效果只对嵌入式css显示有效 :none?

javascript - 将图像缩放到中心 jquery 或 javascript

css - float 图像伸出 div 底部

c++ - g++ __FUNCTION__ 替换时间

java - 有效地进行 Java String 替换

javascript - 当新数组包含现有数组时,无法通过拼接删除单元格

javascript - 移动一个 div 样式的光标 :move

javascript - 获取 PHP URL 的 JS 值

javascript - 在 ember.js 中第二次将模型重新绑定(bind)到列表时出现问题

python - 打印时元素间距均匀