第二步，在元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令
第三步，绑定v-html指令数据，这里设置为字符串
第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含
标签
第五步，预览该静态页面，这时会看到页面显示为“v-html指令”
第六步，将调试打开，这时发现
中有个
标签，就成功地添加了html元素。
原文指路： https://www.cnblogs.com/leegent/p/9274424.html 需求 ：在渲染表格时，将 两个字段 渲染在 同一个单元格 内部，且 换行区分 显示。 思路：换行需要换行符，接口请求成功后，返回相关字段，添加换行符的方式是 字符串拼接--+'\n'+ ,在vue中渲染相关字段值含有换行符的处理方式是 Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格 。主要就是将空白格识别为可换行即可。 解决： 1.使换行符功能正常，在换行符处正常换行。----- v-html 将字符串里的\n替换为<br>，然后用v-html指令渲染字符串为innerHTML。就是用正常解析html标签的方式进行解析。也就是说，在解析text时，使用的是解析HTML文件的方式，保证正确识别text中的网页元素标签。不过，在此之前，需要处理一下字段值。2.基于vue中的识别机制，将\n解析为空白后，利用设置css属性，使空白处换行显示。 white-space: pre-linewhite-space相关属性： normal 默认。空白会被浏览器忽略。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）