web前端vue实现插值文本和输出原始html

Vue.js

使用了基于

HTML

的模板语法，允许开发者声明式地将

DOM

绑定至底层

Vue

实例的数据。所有

Vue.js

的模板都是合法的

HTML

，所以能被遵循规范的浏览器和

HTML

解析器解析。

在vue里最常见的数据绑定是使用“Mustache”语法

(双大括号)

的文本插值：

<span>Message:

{{

value

}}</span>

//

插值文本

无论何时，绑定的数据对象上

value

属性发生了改变，页面上都会响应的做出重新渲染。

或者有时候只是想更新一次，不想每次都更新数据了页面也重新渲染，可以通过

v-once指令也能实现一次性的更新：

<span

v-once>这个将不会改变:

{{

value

}}</span>

//

value的值改变了一次后，第二次改变时就不会再重新渲染页面

有时候你插入的不是单单一个文本时，比如一个富文本的值时，它包含了各种文本值和各种原始的html的标签，要完整的显示到页面上，就得使用v-html的指令：

<template>

<div

v-html="htmlvalue"></div>

//

调用显示富文本，将会按照原始的html显示

</template>

<script>

export

default

{

data(){

return{

htmlvalue:

'<span

style="color:red">the

should

be

red</span>'

//

比如：这是一个富文本的值

}

}

}

</script>

注意：你的站点上动态渲染的任意

HTML

可能会非常危险，因为它很容易导致XSS

攻击。请只对可信内容使用

HTML

插值，

绝不要

对用户提供的内容使用插值。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue模板语法-插值详解

2、安装html2Canvas: npm install --save html2canvas

这里使用 iframe 嵌套需要转成pdf的html文件；

如果pdf内容是动态的，可以将html丢给后端，让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可，然后将整个html作为字符串传给前端，前端再使用iframe 的 srcdoc属性将内容渲染出来。

不存在分页内容裂开的情况，但对样式呈现不太友好，有时会出现内容偏移情况，时好时坏的，经过不断的尝试，发生偏移的时候，可以将html2Canvas的width写死，但是值具体是多少，需要你自己猜

分页会出现问题：比如图片裂开，表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight，一点点试出来合适的值（应该有更好的方法，但是技术有限）

1. 生成多页pdf，分页内容裂开的问题

---