前两篇提到了v-text,v-html,本次主要介绍Vue的基本指令:v-pre,以及这三者之间的一些区别。
使用工具:HbuilderX
v-pre是什么
v-pre是vue的基本指令之一,是告诉 Vue.js 跳过这个元素及其所有子元素的编译过程,将其视为静态内容,不会触发 Vue.js 的编译过程。
举个例子,如果这个元素下的文本中有插值表达式,会不会被解析呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdnWebPage</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id='app'>
<div v-text='desc'></div>
<div v-html='desc'></div>
<div v-pre>这是一段描述信息{{desc}}</div>
</div>
<script>
var csdnWeb = {
data() {
return {
desc: '<h1>这是一段描述信息</h1>'
}
}
}
var app = Vue.createApp(csdnWeb)
app.mount('#app')
</script>
</body>
</html>
可以看到的是,div容器里面的文本包含插值表达式,但是插值表达式没有被解析,浏览器直接把{{desc}}当作纯文本显示出来了。
浏览器JS把v-text/v-html/v-pre解析成了什么
上一篇留了个问题,如果v-text绑定的文本里带了插值表达式,是否会解析。我们可以打开浏览器看一下js怎么解析我们的代码的:
v-text
可以看到,代码 <div v-text='desc'></div> 被解析为<div><h1>这是一段描述信息</h1></div>,也就是说,v-text 的值就是放在了容器<div>里面,动态展示desc 的值,但须注意<h1>标签在此处是作为文本存在。而如果再在<div v-text='desc'></div>中间写文本(如:<div v-text='desc'>这是一段文字{{desc}}</div>)是解析不到的,你可以试试看。
v-html
再看<div v-html='desc'></div> ,很明显可以看到,此处的<h1>标签是被解析了的。
v-pre
<div v-pre>这是一段描述信息{{desc}}</div> ,之前说到插值表达式是可以动态展示对应变量属性值的,但很明显此处,插值表达式并没有被解析,而是当作了纯文本去显示。
总结:并注意三者的写法
v-pre
:
- 作用: 告诉 Vue.js 跳过这个元素及其所有子元素的编译过程,将其视为静态内容,不会触发 Vue.js 的编译过程。
v-html
:
- 作用: 可以动态地渲染包含 HTML 标签的字符串。
v-text
:
- 作用: 将元素的文本内容设置为指定的字符串,用于动态地渲染纯文本内容。
下一篇:介绍...