快捷導(dǎo)航

Vue中使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的方法

更新時(shí)間：2023年10月11日 10:28:37 作者：小吳吳吳呀

?v-model?指令可以用在表單?input、textarea?及?select?元素上創(chuàng)建雙向數(shù)據(jù)綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素,本文給大家介紹Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素,感興趣的朋友一起看看吧

v-model 與 v-bind 指令的區(qū)別：
Vue 中兩種數(shù)據(jù)綁定方式的區(qū)別：
textarea 多行文本使用 v-model：
單選按鈕使用 v-model：
單個(gè)復(fù)選框使用 v-model：
單個(gè)復(fù)選框指定 v-model 選中值:
多個(gè)復(fù)選框使用 v-model:
select 單選時(shí)使用 v-model:
select 多選時(shí)使用 v-model:

v-model 指令可以用在表單 input、textarea 及 select 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。

基礎(chǔ)用法：

<div id="APP">
	<input type="text" v-model:value="tel" >
	<p>您的手機(jī)號(hào)：{{tel}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			tel: 15503931234,
		}
	},
});

注：當(dāng)我們修改輸入框里的內(nèi)容時(shí)，下方的內(nèi)容也會(huì)跟著變化。也就是說(shuō)我們修改內(nèi)容時(shí)，改變了 data 中的數(shù)據(jù)，data 中的數(shù)據(jù)變化后又重新渲染了 p 標(biāo)簽里的內(nèi)容。

v-model 與 v-bind 指令的區(qū)別：

<div id="APP">
	<input type="text" :value="tel" >
	<p>您的手機(jī)號(hào)：{{tel}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			tel: 15503931234,
		}
	},
});

注：使用 v-bind 綁定數(shù)據(jù)，修改輸入框里的內(nèi)容時(shí)，下方的內(nèi)容不會(huì)發(fā)生變化。也就是說(shuō)我們修改內(nèi)容時(shí)，不會(huì)改變 data 中的數(shù)據(jù)。

Vue 中兩種數(shù)據(jù)綁定方式的區(qū)別：

單向數(shù)據(jù)綁定 v-bind ：數(shù)據(jù)只能從 data 流向頁(yè)面。

雙向數(shù)據(jù)綁定 v-model ：數(shù)據(jù)不僅能從 data 流向頁(yè)面，還可以從頁(yè)面流向 data 。

v-model 指令簡(jiǎn)寫(xiě)：

v-model:value 也可以簡(jiǎn)寫(xiě)為 v-model ，因?yàn)?v-model 默認(rèn)收集的就是 value 值。

<div id="APP">
	<input type="text" v-model="tel" >
	<p>您的手機(jī)號(hào)：{{tel}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			tel: 15503931234,
		}
	},
});

注：雙向數(shù)據(jù)綁定一般都應(yīng)用在表單類元素上（如：input、select等）。

textarea 多行文本使用 v-model：

<div id="APP">
	<textarea placeholder="請(qǐng)輸入簡(jiǎn)介" v-model="content"></textarea>
	<p>您的簡(jiǎn)介：{{content}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			content: "",
		}
	},
});

單選按鈕使用 v-model：

<div id="APP">
	<label>
		<input type="radio" value="男" v-model="sex"> 男
	</label>
	<label>
		<input type="radio" value="女" v-model="sex"> 女
	</label>
	<p>您已選擇：{{sex}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			sex: "男",
		}
	},
});

注：當(dāng)選中時(shí)，sex 為 value 中的值。

單個(gè)復(fù)選框使用 v-model：

<div id="APP">
	<input type="checkbox" v-model="status">
	<p>是否選中：{{status}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			status: true,
		}
	},
});

注：當(dāng)選中時(shí)，status 為 true 。未選中時(shí)，status 為 false .

單個(gè)復(fù)選框指定 v-model 選中值:

<div id="APP">
	<input type="checkbox" v-model="status" true-value="同意" false-value="不同意">
	<p>您是否同意：{{status}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			status: "同意",
		}
	},
});

注：當(dāng)選中時(shí)，status 為同意。未選中時(shí)，status 為不同意。

多個(gè)復(fù)選框使用 v-model:

<div id="APP">
	<label>
		<input type="checkbox" value="草莓" v-model="list"> 草莓
	</label>
	<label>
		<input type="checkbox" value="藍(lán)莓" v-model="list"> 藍(lán)莓
	</label>
	<label>
		<input type="checkbox" value="火龍果" v-model="list"> 火龍果
	</label>
	<p>您已選擇：{{list}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			list: ["草莓"],
		}
	},
});

注：多個(gè)復(fù)選框，需要綁定到同一個(gè)數(shù)組上。選中的值，會(huì)自動(dòng)添加到數(shù)組中。

select 單選時(shí)使用 v-model:

<div id="APP">
	<select v-model="price">
		<option value="0">請(qǐng)選擇</option>
		<option value="200">草莓</option>
		<option value="100">藍(lán)莓</option>
		<option value="150">火龍果</option>
	</select>
	<p>您需要支付：{{price}} 元</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			price: 0,
		}
	},
});

注：如果 v-model 表達(dá)式的初始值未能匹配任何選項(xiàng)，select 元素將被渲染為未選中狀態(tài)。所以更推薦給 price 一個(gè)默認(rèn)值。

select 多選時(shí)使用 v-model:

<div id="APP">
	<select v-model="list" multiple>
		<option value="草莓">草莓</option>
		<option value="藍(lán)莓">藍(lán)莓</option>
		<option value="火龍果">火龍果</option>
		<option value="香蕉">香蕉</option>
		<option value="蘋(píng)果">蘋(píng)果</option>
	</select>
	<p>您已選擇：{{list}}</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			list: ["草莓","火龍果"],
		}
	},
});

注：添加 multiple 屬性后，按住 Ctrl 鍵再點(diǎn)擊選項(xiàng)可以多選內(nèi)容，多選時(shí)需要綁定到同一個(gè)數(shù)組上。

到此這篇關(guān)于Vue中如何使用v-model雙向數(shù)據(jù)綁定select、checked等多種表單元素的文章就介紹到這了,更多相關(guān)Vue v-model雙向數(shù)據(jù)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: