v-cloak,v-text,v-html,v-on的基本使用

v-cloak,v-text,v-html,v-on的基本使用

v-cloak:可解决 插值表达式闪烁的问题(还要在style样式表中设计display:none;)
v-text:默认 不闪烁 (但v-text会覆盖元素中原本的内容,)
v-html:使msg内容中的HTML标签具有意义,而不会显示出来
v-bind: 是 Vue中,提供的用于绑定属性的指令
指令可以被简写为 :要绑定的属性
可以写合法的JS表达式
v-on: 事件绑定机制

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-cloak,v-text,v-html的基本使用</title>
	<script src="../../jQuery库/vue-2.4.0.js"></script>
	<style>
		[v-cloak]{
			display: none;
			/* 隐藏 */
		}
	</style>

</head>
 <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
 <!-- 默认 v-text 是没有闪烁问题的 -->
  <!-- v-text会覆盖元素中原本的内容,但是 插值表达式v-cloak  只会替换自己的这个占位符,不会把 整个元素的内容清空 -->

<body>
	<div id="app">
		<p v-cloak>+++{{ msg }}---</p>
		<p v-text="msg"></p>
		<p v-text="msg">======</p>       <!-- 标签中间的值会被msg替换掉    -->
		<p v-text="msg2"></p>
		<p v-text="msg2"></p>
		<p v-html="msg2"></p>
	</div>

	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'123',
				msg2:'<h2>我想输出带有HTML格式的纯文本</h2>'
				
			}
		})
	</script>
</body>
</html>

输出结果:

+++123—

123

123

<‘h2>我想输出带有HTML格式的纯文本</h2’>

<’h2>我想输出带有HTML格式的纯文本</h2 ‘>

我想输出带有HTML格式的纯文本

其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown…

猜你喜欢

转载自blog.csdn.net/Pandora_417/article/details/89818362