Vue中的一些指令

最新推荐文章于 2024-06-16 22:02:56 发布

朱振玉小迷弟

最新推荐文章于 2024-06-16 22:02:56 发布

阅读量97

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue html javascript js

本文链接：https://blog.csdn.net/weixin_50357864/article/details/115032710

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、v-once

当一个元素通过el挂载点挂载到页面上时，是可以通过页面中的开发者模式局部更新的，但加了v-once的元素不会进行局部更新，用的不多，且v-once后面不跟表达式。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-once</title>
	</head>
	<body>
		<div id="app">
			<h2>{{ message }}</h2>
			<h2 v-once>{{ message }}</h2>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					message:'你好啊哈哈哈哈'
				}
			})
		</script>
	</body>
</html>

效果图：

在这里插入图片描述

二、v-html

通过把服务器返回的标签解析出来

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-once</title>
	</head>
	<body>
		<div id="app">
			<h2>{{ url }}</h2>
			<h2 v-html="url"></h2>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					url:"<a href='http://www.baidu.com'>百度一下</a>"
				}
			})
		</script>
	</body>
</html>

效果图：

在这里插入图片描述

三、v-text

可以用来输出语句，这点上等同于mustache指令，但v-text不够灵活，在输出语句时，mustache会把标签内的内容与el挂载点上的内容进行拼接，而v-text会将标签内的内容覆盖掉。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-once</title>
	</head>
	<body>
		<div id="app">
			<h2>{{ message }}前端大佬</h2>
			<h2 v-text="message">前端大佬</h2>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					message:"你好啊哈哈哈！"
				}
			})
		</script>
	</body>
</html>

效果图：

在这里插入图片描述

四、v-pre

类似于html中的pre双标签，即原模原样输出。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-once</title>
	</head>
	<body>
		<div id="app">
			<h2>{{ message }}前端大佬</h2>
			<h2 v-pre>{{ message }}前端大佬</h2>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					message:"你好啊哈哈哈！"
				}
			})
		</script>
	</body>
</html>