欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文輕松了解v-model及其修飾符

 更新時(shí)間：2021年11月08日 15:44:51   作者：Andy_W  
這篇文章主要給大家介紹了關(guān)于v-model及其修飾符的相關(guān)資料,v-model指令有三個(gè)可以選用的修飾符：.lazy、.number以及.trim,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

用來(lái)綁定數(shù)據(jù)和元素value值，實(shí)現(xiàn)雙向綁定。

當(dāng)元素的值改變的時(shí)候，數(shù)據(jù)也改變，反過(guò)來(lái)，當(dāng)數(shù)據(jù)發(fā)生改變，元素的值也改變。

在大部分情況下，所有用戶的輸入值都要通過(guò)v-model,一來(lái)好用，二來(lái)安全，而且功能也很強(qiáng)大。

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

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

v-model的修飾符：

lazy

懶惰，表示惰性更新，不會(huì)立馬更新。

事實(shí)上它是觸發(fā)了一個(gè)change事件。

好處：當(dāng)用戶輸入完了才綁定，才會(huì)顯示表單驗(yàn)證的結(jié)果，不管正確還是錯(cuò)誤。但在用戶輸入的過(guò)程中，不去打擾他。另外性能也有一點(diǎn)點(diǎn)的提高（不過(guò)很小，可以忽略不計(jì)）

<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

一般用于年齡、價(jià)錢(qián)等可以用數(shù)字來(lái)表示的類(lèi)型

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

在通常情況下，如果沒(méi)有number，用戶輸入的是數(shù)字，但是也是字符串的數(shù)字。如果這里填了修飾符 v-model.number那么得到就是number類(lèi)型的數(shù)字了，不用再轉(zhuǎn)換了。

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

v-model在不同input類(lèi)型以及在其他元素上的使用

1.除了在以外，還能在input元素為其他類(lèi)型上使用

1.1  在input元素 類(lèi)型為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.js
var app = new Vue({
	el:'.app',
	data:{
		sex:'',
	}
});

1.2在input元素 類(lèi)型為checkbox上使用(復(fù)選框)

<div class="app">
	你喜歡男的還女的：<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中的使用(多行文本)

多行文本

其實(shí)多行文本，跟單行文本的使用沒(méi)有什么區(qū)別，只不過(guò)一個(gè)多行一個(gè)單行，使用是一樣的。

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

var app = new Vue({
	el:'.app',
	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 多選下拉列表

其實(shí)就是元素加個(gè)multiple屬性，表示多個(gè)，多選

<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'],
	}
});

總結(jié)

到此這篇關(guān)于v-model及其修飾符的文章就介紹到這了,更多相關(guān)v-model及其修飾符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論