【前端框架Vue】基本指令：v-pre

作者：繁依Fanyi0 | 2024-03-06 09:52:17

踩

v-pre

前两篇提到了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：

作用： 将元素的文本内容设置为指定的字符串，用于动态地渲染纯文本内容。

下一篇：介绍...

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/197664