Vue中v-model的使用示例詳解

更新時間：2025年04月17日 16:36:11 作者：沅霖

v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性,也會在更新data綁定屬性時候,更新頁面上輸入控件的值,這篇文章主要介紹了Vue之v-model的使用,需要的朋友可以參考下

一，v-model是什么

v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值。

二，為什么使用v-model

v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發(fā)效率。在view層，model層相互需要數(shù)據(jù)交互，即可使用v-model。

三，v-model的原理簡單描述

v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會更新view層的數(shù)值變化。

四，用途

用于在表單類元素(單選、多選、下拉選擇、輸入框等)上雙向綁定數(shù)據(jù)。
簡單使用
v-model與input輸入框的搭配使用：

<div id="app">
		<input type="text" v-model="message" placeholder="輸入...."/>
		<p>輸入的內(nèi)容是：{{message}}</p>
	</div>
	<script type="text/javascript" src="../js/vue.js">
	</script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				message:''
			}
		})
	</script>

注意
使用v-model后：

1.表單控件顯示的值只依賴所綁定的數(shù)據(jù)，不再關(guān)心初始化時的value屬性

2.對于在之間插入的值，也不會生效

3.使用v-model時，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是拼音階段，Vue是不會更新數(shù)據(jù)的，當(dāng)敲下漢字時才會觸發(fā)更新。如果希望總是實時更新，可以使用@input代替v-model
用法：

<div id="app">
			<textarea @input="handleInput" placeholder="輸入..."></textarea>
			<p>輸入的內(nèi)容是：</p>
			<p style="white-space: pre;">{{text}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					text:''
				},
				methods:{
					handleInput:function(e){
						this.text = e.target.value;
					}
				}
			})
		</script>

單選按鈕上使用
單選按鈕在單獨使用時，不需要v-model，直接使用v-bind綁定一個布爾類型的值，為真時選中，為否時不選。
例：

<div id="app">
			<input type="radio" :checked="picked"/>
			<label>單選按鈕</label>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					picked:true
				}
			})
		</script>

如果是組合使用來實現(xiàn)互斥選擇的效果，就需要v-model配合value來使用。
例：

<div id="app">
			<input type="radio" v-model="picked" id="badminton" value="羽毛球" />
			<label for="badminton">羽毛球</label>
			<br/>
			<input type="radio" v-model="picked" id="basketball" value="籃球" />
			<label for="basketball">籃球</label>
			<br/>
			<input type="radio" v-model="picked" id="football" value="足球" />
			<label for="football">足球</label>
			<br/>
			<p>選擇的項是：{{picked}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					picked:"籃球"
				}
			})
		</script>

數(shù)據(jù)的picked值與單選按鈕的value值一致時，就會選中該項。
復(fù)選框上使用
復(fù)選框也分單獨使用和組合使用，不過用法稍與單選不同。復(fù)選框單獨使用時，是用v-model來綁定一個布爾值。
例：
在勾選時，數(shù)據(jù)checked的值變?yōu)榱藅rue，label中渲染的內(nèi)容也會更新。

<div id="app">
			<input type="checkbox" v-model="checked" id="checked"/>
			<label for="checked">選擇狀態(tài)：{{checked}}</label>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					checked:false
				}
			})
		</script>

組合使用時，也是v-model與value一起，多個勾選框都綁定到同一個數(shù)組類型的數(shù)據(jù)，value的值在數(shù)組當(dāng)中，就會選中這一項。這一過程也是雙向的，在勾選時，value的值也會自動push到這個數(shù)組中。
例：

<div id="app">
			<input type="checkbox" v-model="checked" id="badminton" value="羽毛球" />
			<label for="badminton">羽毛球</label>
			<br/>
			<input type="checkbox" v-model="checked" id="basketball" value="籃球" />
			<label for="basketball">籃球</label>
			<br/>
			<input type="checkbox" v-model="checked" id="football" value="足球" />
			<label for="football">足球</label>
			<br/>
			<p>選擇的項是：{{checked}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					checked:['羽毛球', '籃球']
				}
			})
		</script>

選擇列表上使用
選擇列表就是下拉選擇器，也就是常見的表單控件，同樣也分為單選和多選兩種。

單選例：

**備注：**option是備選項，如果含有value屬性，v-model會優(yōu)先匹配value值；如果沒有，就會直接匹配option的text，比如選中第一項時，selected的值是badminton，而不是羽毛球，但選中第二項時，由于沒有value屬性，selected的值就是籃球。

<div id="app">
			<select v-model="selected">
				<option value ="badminton">羽毛球</option>
				<option>籃球</option>
				<option>足球</option>
			</select>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					selected:'籃球'
				}
			})
		</script>

多選例：
**備注：**給添加屬性multiple就可以多選了，此時v-model綁定的是一個數(shù)組，與復(fù)選框用法類似。

<div id="app">
			<select v-model="selected" <multiple></multiple>>
				<option v-for="item in options" :value="item.value">{{item.text}}</option>
			</select>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					selected:'basketball',
					options:[
						{text:'籃球', value:'basketball'},
						{text:'羽毛球', value:'badminton'},
						{text:'足球', value:'football'}
					]
				}
			})
		</script>

注：雖然用選擇列表可以很簡單地完成下拉選擇的需求，但在實際業(yè)務(wù)中由于樣式依賴平臺和瀏覽器，無法統(tǒng)一，也不太美觀，功能也受限，比如不支持搜索，故并不常用。常見的解決方案是用div模擬一個類似的控件。

修飾符
與事件修飾符類似，v-model也有修飾符，用于控制數(shù)據(jù)同步的時機。

.lazy
在輸入框中，v-model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)(除了提示中介紹的中文輸入法情況外)，使用修飾符.lazy會轉(zhuǎn)變?yōu)樵赾hange事件中同步，示例代碼如下：

<div id="app">
			<input type="text" v-model.lazy="message"/>
			<p>{{message}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			})
		</script>

這時，message并不是實時改變的，而是在失焦或按回車時才更新。

.number
使用修飾符.number可以將輸入轉(zhuǎn)換為Number類型，否則雖然你輸入的是數(shù)字，但它的類型其實是String，比如在數(shù)字輸入框時會比較有用，示例代碼如下：

<div id="app">
			<input type="number" v-model.number="message"/>
			<p>{{message}}</p>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			})
		</script>

.trim
修飾符.trim可以自動過濾輸入的首尾空格，示例代碼如下：

到此這篇關(guān)于Vue中v-model的使用示例詳解的文章就介紹到這了,更多相關(guān)Vue v-model使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: