Vue的基础指令

2022-08-29 23:02:37 阅读：177 来源： 互联网

1.普通插值表达式插入数据

<body>
	<div id="app">
		<div>{{text1}}</div>
		<div>{{text2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			text1:"插入值一",
			text2:"插入值二"
		}
	})
</script>

2.文本指令　

　　1.v-text

　　v-text就相当于Dom中的innerText

<body>
	<div id="app">
		<div v-text="text1"></div>
		<div v-text="text2"></div>
		<div style="color: purple;">{{text1}}</div>
		<div style="font-weight: 800;">{{text2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			text1:"插入值一",
			text2:"插入值二"
		}
	})
</script>

　　2.v-html

　　v-html就相当于Dom中的innerHTML

<body>
	<div id="app">
		<div v-html="html1"></div>
		<div v-html="html2"></div>
		<div>{{html1}}</div>
		<div>{{html2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			html1:"666666",
			html2:"888888"
		}
	})
</script>

　　3.v-pre

　　加上v-pre属性的话就会被识别为文本，而不是js表达式

<body>
	<div id="app">
		<div v-pre=>{{pre1}}</div>
		<div v-pre=>{{pre2}}</div>
		<div>{{pre1}}</div>
		<div>{{pre2}}</div>
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		data:{
			pre1:"99999",
			pre2:"77777"
		}
	})
</script>

　　4.v-bind

　　v-bind就是给所有标签绑定js变量

<body>
	<div id="app">
		<div>{{statuses[1].user.name}}</div>
		<img v-bind:src="statuses[9].user.profile_image_url">
		<div>{{statuses[1].text}}</div>
		<div>{{statuses[1].created_at}}</div>
		<img :src="statuses[9].user.profile_image_url" alt="">
　　　　　　　　　　//可以用":"来代替v-bind:
	</div>
//这些都是obj对象的属性中的值
</body>
<script>
	console.log(obj)
	new Vue({
		el:"#app",
		data:obj
	})
</script>

标签：el,Vue,app,基础,text2,指令,new,data
来源： https://www.cnblogs.com/forever-ljf/p/16637691.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue的基础指令