将vue的dom转成普通html

将vue的dom转成普通html方法。

1、Vue.js的DOM转换成普通HTML的过程中，会利用Vue.js的特性来把数据和模板编译成实际的HTML。

2、从而可以以最快的速度实现从JavaScript对象到DOM的转换。

在项目中遇到解析html，发现v-html并不满足复杂的渲染，就使用jq来处理

1.v-html 处理简单的标签

如：text="<p>vue转换</p>"

html中解析：

<p v-html="text">{{text}}</p>

2.返回标签中还有img、a标签，使用v-html就不会转换方法如下：

使用jquery处理:

1.在标签定义class

<div class="descript"></div>

2.安装jq

npm install jquery --save

3.在使用的地方引入

import $ from 'jquery'

async loadProductDetail(cData) {

const { data } = await getProductDetail(cData)

this.descript = data.data.sku //接口返回数据赋值

this.loadhtml() //调用方法

},

loadhtml() {

('.descript').html(this.descript) //赋值

const srcdescript = ('.descript').find('img') //找到当前所有的a标签、img标签

for (let i = 0i <srcdescript.lengthi++) { //遍历

let a = srcdescript.eq(i).attr('href') //找到a标签的href属性

let b = evals.eq(i).attr('src') //找到img标签的src属性

//this. url + a) //赋值

srcdescript.eq(i).attr('src', this.$url + b)//赋值

//如果接口返回有就不添加:

// srcdescript.eq(i).attr('href', a) //赋值

//srcdescript.eq(i).attr('src', b)//赋值

}

}

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模板语法-插值详解

---