vue从后台获取的数据有html标签通过v-html渲染到页面，然后怎么给这里面的html添加样式？_随笔

vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：

准备材料：Vue.js、HBuilder、浏览器

1、创建静态页面vhtml.html，并引入vue.js文件。

2、在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令。

3、绑定v-html指令数据，这里设置为字符串。

4、Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签。

5、预览该静态页面，这时会看到页面显示如下

6、将调试打开，这时发现<div></div>中有个<p></p>标签，完成添加。

第一步，创建静态页面vhtml.html，并引入vue.js文件

第二步，在元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令

第三步，绑定v-html指令数据，这里设置为字符串

第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含

标签

第五步，预览该静态页面，这时会看到页面显示为“v-html指令”

第六步，将调试打开，这时发现

中有个

标签，就成功地添加了html元素。

在vue中将数据填充进模板，最常用的方法应该是 {{ name }} 这样插值，但是有时候向后端请求到的数据中有转义字符，此时页面就会直接显示转义字符，而不是先转义再显示。

这是因为， {{ name }} 插值类似于textContent赋值， textContent 赋值输出的是 text/plain 文本内容，它是不会被浏览器转义的。

要想被浏览器转义，可以使用 v-html ， v-html 类似于 innerHTML ， innerHTML 赋值输出的是 text/html html内容，它在显示之前会先被浏览器转义

终上，关于vue里面数据填充的几种方法总结

欢迎分享，转载请注明来源：内存溢出

vue从后台获取的数据有html标签通过v-html渲染到页面，然后怎么给这里面的html添加样式？