目錄

• 前言
• v-model的修飾符：
• lazy
  
• trim
  
• number
  
• v-model在不同input型別以及在其他元素上的使用
• 1.除了在以外，還能在input元素為其他型別上使用
• 2. v-model在textarea中的使用(多行文字)
• 3. v-model在select中的使用(下拉列表)
• 總結

前言

用來繫結資料和元素value值，實現雙向繫結。

當元素的值改變的時候，資料也改變，反過來，當資料發生改變，元素的值也改變。

在大部分情況下，所有使用者的輸入值都要通過v-model,一來好用，二來安全，而且功能也很強大。

<div class="app">
	<input type="text" v-model="name">
	{{http://www.cppcns.com
 
name}}
</div>

var app = new ({
	el:'.app',data:{
		name:'Alice'
	}
});

v-model的修飾符：

lazy

懶惰，表示惰性更新，不會立馬更新。

事實上它是觸發了一個change事件。

好處：當用戶輸入完了才繫結，才會顯示錶單驗證的結果，不管正確還是錯誤。但在使用者輸入的過程中，不去打擾他。另外效能也有一點點的提高（不過很小，可以忽略不計）

<div class="app">
    <input type="text" v-model.lazy="name">
    {{name}}
</div>

trim

修剪; 切去，割掉，這裡表示：去掉前後兩端的所有空格

<div class="app">
    <input type="text" v-model.trim="name">
    {{name}}
</div>

number

一般用於年齡、價錢等可以用數字來表示的型別

<div class="app">
    <input type="text" v-model.number="age">
    {{age}}
</div>

在通常情況下，如果沒有number，使用者輸入的是數字，但是也是字串的數字。如果這裡填了修飾符 v-model.number那麼得到就是number型別的數字了，不用再轉換了。

v-model除了能在input 的type為text輸入框中使用，還能在其他地方使用。

v-model在不同input型別以及在其他元素上的使用

1.除了在以外，還能在input元素為其他型別上使用

1.1 在input元素 型別為radio上使用(單選框)

<div class="app">
	<label>
		男
		<input type="radio" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="radio" v-model="sex" value="famale">
	</label>
	{{sex}}
</div>

//main.
var app = new Vue({
	el:'.app',data:{
		sex:'',}
});

1.2在input元素 型別為checkbox上使用(複選框)

<div class="app">
	你喜歡男的還女的：&gxlpgXDtYAlt;br>
	<label>
		男
		<input type="checkbox" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="checkbox" v-model="sex" value="famale">
	</label><br>
	{{sex}}
</div>

var app = new Vue({
	el:'.app',data:{
		sex:['male'],}
});

2. v-model在textarea中的使用(多行文字)

多行文字

其實多行文字，跟單行文字的使用沒有什麼區別，只不過一個多行一個單行，使用是一樣的。

<div class="app">
	<textarea v-model="article"></textarea>
</div>

var app = new Vue({
	el:'.apgxlpgXDtYAp',data:{
		article:`has a lot of code。。。。。。。。。。。。。。。。。。。。`,}
});

3. v-model在select中的使用(下拉列表)

3.1 單選下拉列表

<div class="app">
	<div>where are you from？</div>
	<select v-model='from'>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
	</select>
</div>

var app = new Vue({
	el:'.app',data:{
		from:'1',}
});

3.2 多選下拉列表

其實就是元素加個multiple屬性，表示多個，多選

<div class="app">
	<div>where are you want to go？</div>
	<select v-model='from' multiple>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
		<option value="4">SHANGHAI</option>
		<option value="5">CHENGDU</option>
	</select>
</div>

var app = new Vue({
	el:'.app',data:{
		from:['1','2'],}
});

總結

到此這篇關於v-model及其修飾符的文章就介紹到這了,更多相關v-model及其修飾符內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！