溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

vue中的指令和插值怎么使用

發(fā)布時(shí)間：2022-11-03 09:13:21 來(lái)源：億速云 閱讀：100 作者：iii 欄目：編程語(yǔ)言

這篇文章主要介紹“vue中的指令和插值怎么使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue中的指令和插值怎么使用”文章能幫助大家解決問(wèn)題。

一、安裝vue

直接使用script標(biāo)簽引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

二、Vue模板案例

步驟

1、引入vue框架
2、定義1個(gè)盒子（根節(jié)點(diǎn)）
3、定義1個(gè)script標(biāo)簽

3.1、定義js對(duì)象（根組件）
3.2、通過(guò)vue創(chuàng)建1個(gè)應(yīng)用
3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）

data()：存放頁(yè)面中顯示數(shù)據(jù)的地方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

	</head>
	<body>
		<!--2、定義1個(gè)盒子（根節(jié)點(diǎn)）-->
		<div id='app'>
			<h2>{{title}}</h2>
			<h2>{{name}}</h2>
		</div>
		
		<!--3、定義一個(gè)script標(biāo)簽-->
		<script>
			//3.1、定義js對(duì)象(根組件)
			const obj={
				//data():存放頁(yè)面中存放數(shù)據(jù)的地方
				data(){
					return{
						title:'kobe',
						name:'cc'
					}
				}
			}
		
			//3.2、通過(guò)vue創(chuàng)建1個(gè)應(yīng)用
			const app=Vue.createApp(obj)
			
			//3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）
			app.mount('#app')
			
		</script>
		
	</body>
</html>

三、基礎(chǔ)模板（記住）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'></div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						
					}
				}
			}).mount('#app')
			
		</script>
		
	</body>
</html>

四、vue的指令和插值

1、{{}}：插值表達(dá)式的語(yǔ)法

{{}}：可以在html中引用data中定義的數(shù)據(jù)
<h2>{{name}}</h2>

2、v-text：填充純文本內(nèi)容（data中的值）

效果和innerText一樣
<h2 v-text='name'></h2>

3、v-html：填充html（data中的值）

效果和innerHtml一樣
<div v-html='desc'></div>

4、v-pre：填充原始數(shù)據(jù)

防止vue對(duì)標(biāo)簽進(jìn)行渲染（標(biāo)簽中寫(xiě)的什么，就顯示什么）
<div v-pre>顯示兩個(gè)花括號(hào)，中間為js：{{}}</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<h2>{{name}}</h2>
			<h2>{{age}}</h2>
			<h2>{{sex}}</h2>
			<h3>info中的a1:{info.a1}</h3>
			<h3>info中的a2:{info.a2}</h3>
			<hr>
			<h2 v-text='name'></h2>
			<h2 v-text='arr[0]'></h2>
			<div v-html='desc'></div>
			<div v-pre>顯示兩個(gè)花括號(hào)，中間為js：{{}}</div>
		</div>
		
		<script>
			//obj是vue的組件對(duì)象
			const obj={
				//data方法（返回的是vue組件對(duì)象的屬性）——》頁(yè)面上要顯示的數(shù)據(jù)全部放到這里
				data(){
					return{
						name:'2022',
						age:18,
						sex:'男',
						info:{
							a1:'66',
							a2:'88'
						},
						desc:'<h2>js</h2>',
						arr:[8,24,23,24,25,66]
					}
				}
			}
			
			//3.2、通過(guò)vue創(chuàng)建1個(gè)應(yīng)用
			const app=Vue.createApp(obj)
			
			//3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）
			app.mount('#app')
			
	
		</script>
		
	</body>
</html>

效果展示：

vue中的指令和插值怎么使用

5、v-bind：屬性綁定

語(yǔ)法：
v-bind:屬性=‘值’
簡(jiǎn)寫(xiě) :屬性=‘值’

<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
簡(jiǎn)寫(xiě)
<a :href="aInfo.addr">{{aInfo.title}}</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
			<!--簡(jiǎn)寫(xiě)-->
			<a :href="aInfo.addr">{{aInfo.title}}</a>
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						aInfo:{
							title:'百度',
							addr:'http://www.baidu.com'
						}
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

樣式綁定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
		<style>
			.js{
				width:200px;
				height:200px;
				background: red;
			}
		</style>
	</head>
	<body>
		
		<div id='app'>
			<!--樣式綁定：class屬性綁定-->
			<div :class='{js:isjs}'>js</div>
		</div>
		<hr />
			<!--樣式綁定 style屬性-->
		<div :style="s1">py</div>

		<script>
			
			Vue.createApp({
				data(){
					return{
						isjs:false,
						s1:{
							width:'300px',
							height:'200px',
							background:'red',
						}
						
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

6、v-on：事件綁定

語(yǔ)法：v-on：事件名稱(chēng)=‘執(zhí)行的方法’
簡(jiǎn)寫(xiě)
@事件名=‘執(zhí)行的方法’

<button v-on:click='switchShow'>切換顯示</button>
簡(jiǎn)寫(xiě)
<button @click='switchShow'>切換顯示</button>

7、v-show：控制元素顯示和隱藏的指令

控制元素顯示隱藏的指令：
v-show 值為T(mén)rue則顯示，值為false為隱藏

<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>

methods：定義頁(yè)面操作過(guò)程中調(diào)用的函數(shù)（vue組件的方法）
注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)

例如

switchShow()
定義頁(yè)面操作過(guò)程中調(diào)用的函數(shù)（vue組件的方法）
注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			
			<button v-on:click='switchShow'>切換顯示</button>
			<!--<button @click='switchShow'>切換顯示</button>-->
			<!--控制元素顯示隱藏的指令：v-show
				值為T(mén)rue則顯示，值為false為隱藏
			-->
			<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
		
		</div>
		
		<script>
			
			Vue.createApp({
				//定義頁(yè)面上顯示數(shù)據(jù)的（組件的屬性）
				data(){
					return{
						status:true
					}
				},
				//定義頁(yè)面操作過(guò)程中調(diào)用的函數(shù)（vue組件的方法）
				//注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)
				methods:{
					switchShow(){
						//在方法中可以通過(guò)this獲取組件中的數(shù)據(jù)
						//方法中的this代表組件中的對(duì)象
						this.status=!this.status
						
					}
				}
				
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

8、v-model：數(shù)據(jù)的雙向綁定

雙向綁定只用于表單和組件
頁(yè)面修改數(shù)據(jù)會(huì)變，數(shù)據(jù)改變，頁(yè)面也會(huì)改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>	
		<!--屬性綁定是單向的-->
		<!--<div id='app'>
			<div>賬號(hào):<input type="text" :value='user'></div>
			<div>密碼:<input type="password" :value='pwd'></div>
		</div>-->
		
		<!--雙向綁定-->
		<div id='app'>
			<div>賬號(hào):<input type="text" v-model='user'></div>
			<div>密碼:<input type="password" v-model='pwd'></div>
			<button @click='login'>登錄</button>
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						user:"root",
						pwd:123456
					}
				},
				methods:{
					login(){
						//發(fā)送請(qǐng)求到后端，
						console.log('提交了登錄')
						console.log(this.user,this.pwd)
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

9、v-if、v-else-if、v-else：條件渲染

通過(guò)條件來(lái)控制元素是否渲染到頁(yè)面

v-if
v-else-if
v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>

		<div id='app'>
			<h2 v-if='item.result==="success"' style="color: green;">{{item}}</h2>
			<h2 v-else-if='item.result===fail' style="color: red;">{{item}}</h2>
			<h2 v-else>{{item}}</h2>
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						item:{
							case_id:1,
							title:'用例1',
							result:"success"
						},
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

10、v-for：遍歷對(duì)象、數(shù)組

案例：根據(jù)不同的結(jié)果，展示不同文字顏色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1、引入vue框架-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<table border='1'>
				<!--表頭-->
				<tr>
					<th>id</th>
					<th>title</th>
					<th>result</th>
					<th>操作</th>
				</tr>
				<!--表格-->
				<tr v-for='item in cases'>
					<td>{{item.id}}</td>
					<td>{{item.title}}</td>
					<!--條件渲染-->
					<td v-if='item.result==="success"' style="color: green;">{{item.result}}</td>
					<td v-else-if='item.result==="error"' style="color:blue;">{{item.result}}</td>
					<td v-else-if='item.result==="fail"' style="color:tomato;">{{item.result}}</td>
					<td v-else>{{item.result}}</td>
					<td></td>
				</tr>
				
				
			</table>
			
		</div>
		
		<script>
			
			Vue.createApp({
				data(){
					return{
						cases:[
							{
							case_id:1,
							title:'用例1',
							result:"success"
						},
						{
							case_id:2,
							title:'用例2',
							result:"fail"
						},
						{
							case_id:3,
							title:'用例3',
							result:"error"
						},
						{
							case_id:4,
							title:'用例4',
							result:"success"
						},
						
						]
					}
				}
			}).mount('#app')
			
	
		</script>
		
	</body>
</html>

vue中的指令和插值怎么使用

關(guān)于“vue中的指令和插值怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手