快捷導航

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

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

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

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

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

基礎(chǔ)用法：

<div id="APP">
	<input type="text" v-model:value="tel" >
	<p>您的手機號：{{tel}}</p>
</div>

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

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

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

<div id="APP">
	<input type="text" :value="tel" >
	<p>您的手機號：{{tel}}</p>
</div>

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

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

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

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

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

v-model 指令簡寫：

v-model:value 也可以簡寫為 v-model ，因為 v-model 默認收集的就是 value 值。

<div id="APP">
	<input type="text" v-model="tel" >
	<p>您的手機號：{{tel}}</p>
</div>

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

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

textarea 多行文本使用 v-model：

<div id="APP">
	<textarea placeholder="請輸入簡介" v-model="content"></textarea>
	<p>您的簡介：{{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: "男",
		}
	},
});

注：當選中時，sex 為 value 中的值。

單個復選框使用 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,
		}
	},
});

注：當選中時，status 為 true 。未選中時，status 為 false .

單個復選框指定 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: "同意",
		}
	},
});

注：當選中時，status 為同意。未選中時，status 為不同意。

多個復選框使用 v-model:

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

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

注：多個復選框，需要綁定到同一個數(shù)組上。選中的值，會自動添加到數(shù)組中。

select 單選時使用 v-model:

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

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

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

select 多選時使用 v-model:

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

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

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

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

您可能感興趣的文章: