vue学习笔记5 v-pre v-cloak v-once

最新推荐文章于 2025-05-23 16:45:04 发布

原创最新推荐文章于 2025-05-23 16:45:04 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个简单的示例介绍了Vue中三种特殊指令的用法：v-pre用于原样输出不被解析的内容；v-cloak用于等待Vue实例准备好后再显示元素；v-once则使元素仅渲染一次，后续数据变化不会更新该元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原样输出：v-pre

渲染完输出：v-cloak

只渲染一次：v-once

	<div id="app">
	<!-- v-pre原样输出 -->
		<h1>v-pre v-cloak v-once</h1>
		<hr>
		<div v-pre>{{message}}</div>
		<div v-cloak>渲染完成后显示</div>
		<div v-once>{{message}}:只进行 一次渲染</div>
		<div><input type="text" v-model="message"></div>
		<div>{{message}}</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				message:'hello World'
			}
		})
	</script>