Vue指令

Vue指令详解

最新推荐文章于 2025-12-03 11:05:25 发布

原创最新推荐文章于 2025-12-03 11:05:25 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #前端

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue中的几个常用指令，包括v-cloak用于解决表达式闪烁问题，v-text与v-html的区别，v-bind用于绑定属性，以及v-on用于事件绑定等。通过具体的代码示例，帮助读者更好地理解和掌握这些指令的使用。

Vue指令 v-cloak v-text v-html v-bind v-on 的使用

v-cloak

演示插入表达式闪烁问题：

用v-cloak标签来解决插入表达式闪烁的问题：

演示：

v-text v -html 赋值

<body>
		<div id="one" >
			<!--｛｛｝｝不会显示html，会当字符串显示出来，只会替换自已的占位符-->
			<p v-cloak>+++++{{msg2}}------</p>
			<!--不会显示html，会当字符串显示出来，并替换div中的内容-->
			<p v-text="msg2">+++++</p>
		    <!--会显示html，并替换div中的内容-->
			<p v-html="msg2">+++++</p>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			  var vm=new Vue({
				  el:'#one',
				  data:{
					  msg:'你好！！！',
					  msg2:'<h1>hello </h1>'
				  }
			  })
		</script>
	</body>

v-bind 用于绑定属性，给属性赋值