Vue v-model實(shí)現(xiàn)案例介紹
更新時(shí)間：2022年09月08日 17:10:05 作者：月光曬了很涼快
v-model就是vue的雙向綁定的指令，能將頁(yè)面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會(huì)在更新data綁定屬性時(shí)候，更新頁(yè)面上輸入控件的值
1. 概述
v-model 是 Vue 提供的一個(gè)語(yǔ)法糖，它是 value 值和事件的結(jié)合體，它會(huì)根據(jù)不同的表單項(xiàng)，來(lái)選擇執(zhí)行不同的事件。它的作用是，通過(guò)和表單元素綁定，實(shí)現(xiàn)雙向數(shù)據(jù)綁定，通過(guò)表單項(xiàng)可以更改數(shù)據(jù)。
另外，v-model 還可以用于各種不同類(lèi)型的輸入，<textarea>、<select> 元素。它會(huì)根據(jù)所使用的元素自動(dòng)使用對(duì)應(yīng)的 DOM 屬性和事件組合：
- 文本類(lèi)型的
<input>和<textarea>元素會(huì)綁定valueproperty 并偵聽(tīng)input事件； <input type="checkbox">和<input type="radio">會(huì)綁定checkedproperty 并偵聽(tīng)change事件；<select>會(huì)綁定valueproperty 并偵聽(tīng)change事件
v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值，而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源，應(yīng)該在 data 選項(xiàng)中聲明初始值。
語(yǔ)法糖：這種語(yǔ)法對(duì)語(yǔ)言的功能并沒(méi)有影響，但是更方便程序員使用
2. 使用方法
在沒(méi)有使用v-model指令時(shí)，我們通過(guò)data數(shù)據(jù)控制表單項(xiàng)中的值，還是麻煩的，需要綁定屬性和事件來(lái)完成。
<div id="app">
<div>
<input type="text" :value="username" @input="setUsername">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: ''
},
methods: {
setUsername(evt) {
this.username = evt.target.value.trim()
}
}
})
</script>
使用 v-model 指令實(shí)現(xiàn)上述效果：
<div id="app">
<div>
<input type="text" v-model="username">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: ''
}
})
</script>
3. 案例
3.1 用戶(hù)登錄
使用 v-model 指令，可以很輕松的獲取表單中的數(shù)據(jù)，也可以很輕松地對(duì)數(shù)據(jù)進(jìn)行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>
賬號(hào)：
<input type="text" v-model="username">
</label>
</div>
<div>
<label>
密碼：
<input type="text" v-model="password">
</label>
</div>
<div>
<textarea v-model="intro"></textarea>
</div>
<div>
<button @click="dologin">登錄系統(tǒng)</button>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
intro: 'hahaha'
},
methods: {
dologin() {
console.log(this.username, this.password, this.intro);
}
}
})
</script>
</body>
</html>
注意：多行文本框中使用插值表達(dá)式 無(wú)效
3.2 todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input placeholder="請(qǐng)輸入內(nèi)容" type="text" v-model="title" @keyup.enter="onEnter">
<hr>
<ul>
<!-- 條件渲染 -->
<li v-if="todos.length===0">無(wú)任務(wù)</li>
<li v-else v-for="item,index in todos" :key="item.id">
<span>{{item.title}}</span>
<span @click="del(index)">刪除</span>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
todos: [],
title: ''
},
methods: {
onEnter() {
this.todos.push({
id: Date.now(),
title: this.title
})
this.title = ''
},
del(index) {
// 刪除 它可以使用 vue中提供的變異方法splice來(lái)完成，用此方法它會(huì)觸發(fā)視圖更新
this.todos.splice(index, 1)
}
}
})
</script>
</body>
</html>
3.3 實(shí)現(xiàn)單個(gè)復(fù)選框
當(dāng)單個(gè)復(fù)選框被選中或者被取消選中時(shí)，我們?nèi)绾潍@取到該復(fù)選框是否被選中的信息？
我們可以通過(guò)綁定事件來(lái)獲?。?/p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<div>
<!-- click事件可以用，但它是的狀態(tài)會(huì)太過(guò)提前，用onchange事件，改變后來(lái)獲取 -->
<input type="checkbox" @click="clickFn">
<input type="checkbox" @change="clickFn">
</div>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
// 單個(gè)復(fù)選框一定要用布爾類(lèi)型
checked: false
},
methods: {
clickFn(evt) {
console.log(evt.target.checked);
}
}
})
</script>
</body>
</html>
注意：在綁定事件時(shí)，click事件可以用，但它是的狀態(tài)會(huì)太過(guò)提前，所以用onchange事件，改變后再來(lái)獲取。
更簡(jiǎn)單的方式是，通過(guò) v-model 指令來(lái)獲?。?/p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<div>
<!-- 單個(gè)復(fù)選框，在數(shù)據(jù)源中定義的數(shù)據(jù)類(lèi)型為布爾類(lèi)型 true選中，false未選中 -->
<input type="checkbox" v-model="checked">
</div>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
// 單個(gè)復(fù)選框一定要用布爾類(lèi)型
checked: false
},
methods: {
}
})
</script>
</body>
</html>
注意：?jiǎn)蝹€(gè)復(fù)選框，在數(shù)據(jù)源中定義的數(shù)據(jù)類(lèi)型為布爾類(lèi)型：true 選中，false未選中
3.4 實(shí)現(xiàn)多個(gè)復(fù)選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<div>
<!--
-->
<ul>
<li>
<input type="checkbox" value="html" v-model="lessons">html
</li>
<li>
<input type="checkbox" value="css" v-model="lessons">css
</li>
<li>
<input type="checkbox" value="js" v-model="lessons">js
</li>
</ul>
<hr>
<div>{{lessons}}</div>
</div>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
// 默認(rèn)選中
lessons: ["js",'css']
},
methods: {
}
})
</script>
</body>
</html>
注意：多個(gè)復(fù)選框，數(shù)據(jù)源中定義的數(shù)據(jù)類(lèi)型為數(shù)組，標(biāo)簽中需要指定它的value值。
3.5 實(shí)現(xiàn)復(fù)選框全選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<div>
<input type="checkbox" v-model="checked" @change="onSelected">
<hr>
<ul>
<li>
<input type="checkbox" value="html" @change="selectlesson" v-model="lessons">html
</li>
<li>
<input type="checkbox" value="css" @change="selectlesson" v-model="lessons">css
</li>
<li>
<input type="checkbox" value="js" @change="selectlesson" v-model="lessons">js
</li>
</ul>
<hr>
<div>{{lessons}}</div>
</div>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
lessons: [],
checked: false
},
methods: {
onSelected(evt) {
// 選中了
if (evt.target.checked) {
this.lessons = ["js", 'html', 'css']
} else {
this.lessons = []
}
},
selectlesson() {
// 只要來(lái)操作數(shù)據(jù)源就可以改變視圖
this.checked = this.lessons.length == 3
}
}
})
</script>
</body>
</html>
3.6 單選和下拉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<div>
<h3>{{sex}} -- {{city}}</h3>
<!-- 定義的數(shù)據(jù)類(lèi)型為字符串 -->
<label>
<input type="radio" value="先生" v-model="sex">建行
</label>
<label>
<input type="radio" value="女神" v-model="sex">招行
</label>
</div>
<hr>
<div>
<select v-model="city">
<option value="0">==選擇==</option>
<option value="wh">蕪湖</option>
<option value="bj">北京</option>
</select>
</div>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
sex: '先生',
city: '0'
}
})
</script>
</body>
</html>
注意：?jiǎn)芜x框和復(fù)選框都需要 input 標(biāo)簽提供 value 屬性。
4. v-model修飾符
4.1 lazy
作用：延時(shí)更新數(shù)據(jù)源中的數(shù)據(jù)，失去焦點(diǎn)時(shí)觸發(fā)更新。
<div id="app">
<!-- v-model修飾符 -->
<!-- 延時(shí)更新數(shù)據(jù)源中的數(shù)據(jù) 光標(biāo)移開(kāi)才會(huì)改變數(shù)據(jù) -->
<input v-model.lazy="title">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: ''
}
})
</script>
4.2 trim
作用：自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符。
<div id="app">
<!-- 去空格 trim -->
<input v-model.trim="title">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: ''
}
})
</script>
4.3 number
作用：輸入值轉(zhuǎn)為數(shù)值類(lèi)型。
<div id="app">
<!-- 轉(zhuǎn)為數(shù)值 number -->
<input type="number" v-model.number="n1">
+
<input type="number" v-model.number="n2">
= {{n1+n2}}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2
}
})
</script>
5. 案例
5.1 購(gòu)物車(chē)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<table border="1" width="600">
<tr>
<th>序號(hào)</th>
<th>名稱(chēng)</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>操作</th>
</tr>
<tr v-for="item,index in carts">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="setNum(1,index)">+++</button>
<input type="number" v-model="item.num">
<button @click="setNum(-1,index)">---</button>
</td>
<td>
<button @click="del(index)">刪除</button>
</td>
</tr>
</table>
<hr>
<h3>
合計(jì)：
{{totalPrice()}}
</h3>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
carts: [
{ id: 1, name: '小米12pro', price: 1, num: 1 },
{ id: 2, name: '華為手機(jī)', price: 2, num: 1 },
{ id: 3, name: '水果手機(jī)', price: 3, num: 1 },
]
},
methods: {
setNum(n, index) {
this.carts[index].num += n
if (this.carts[index].num <= 1) this.carts[index].num = 1
if (this.carts[index].num >= 3) this.carts[index].num = 3
// 用最大值和最小值來(lái)限制它的范圍，可以了解一下這種寫(xiě)法
// this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
},
totalPrice() {
// 聚合運(yùn)算
return this.carts.reduce((prev, { price, num }) => {
prev += price * num
return prev
}, 0)
},
del(index) {
// 彈出確認(rèn)框
confirm('確定刪除') && this.carts.splice(index, 1)
}
}
})
</script>
</body>
</html>
5.2 購(gòu)物車(chē)持久化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學(xué)習(xí)使用</title>
<!-- 第1步： 引入vue庫(kù)文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點(diǎn) -->
<div id="app">
<table border="1" width="600">
<tr>
<th>序號(hào)</th>
<th>名稱(chēng)</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>操作</th>
</tr>
<tr v-for="item,index in carts">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="setNum(1,index)">+++</button>
<input type="number" v-model="item.num">
<!-- <button @click="setNum(-1,item)">---</button> -->
<button @click="setNum(-1,index)">---</button>
</td>
<td>
<button @click="del(index)">刪除</button>
</td>
</tr>
</table>
<hr>
<h3>
合計(jì)：
{{totalPrice()}}
</h3>
</div>
<!-- 第3步：實(shí)例化vue -->
<script>
// 初始數(shù)據(jù)應(yīng)該從本地存儲(chǔ)中讀取
function getCarts() {
return !window.localStorage.getItem('carts') ? [{ id: 1, name: '小米12pro', price: 1, num: 1 },
{ id: 2, name: '華為手機(jī)', price: 2, num: 1 },
{ id: 3, name: '水果手機(jī)', price: 3, num: 1 }] : JSON.parse(window.localStorage.getItem('carts'))
}
function setCarts(carts) {
window.localStorage.setItem('carts', JSON.stringify(carts))
}
const vm = new Vue({
el: '#app',
data: {
carts: getCarts()
},
methods: {
setNum(n, index) {
this.carts[index].num += n
if (this.carts[index].num <= 1) this.carts[index].num = 1
if (this.carts[index].num >= 3) this.carts[index].num = 3
// 用最大值和最小值來(lái)限制它的范圍，可以了解一下
// this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
setCarts(this.carts)
},
totalPrice() {
return this.carts.reduce((prev, { price, num }) => {
prev += price * num
return prev
}, 0)
},
del(index) {
if(confirm('確定刪除')){
this.carts.splice(index, 1)
setCarts(this.carts)
}
}
}
})
</script>
</body>
</html>
到此這篇關(guān)于Vue v-model實(shí)現(xiàn)案例介紹的文章就介紹到這了,更多相關(guān)Vue v-model內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-axios的使用以及axios請(qǐng)求賦值為空的問(wèn)題
這篇文章主要介紹了vue-axios的使用以及axios請(qǐng)求賦值為空的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
本文主要介紹了vue3中Teleport和Suspense的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表 前端導(dǎo)出問(wèn)題分析
最近遇到個(gè)問(wèn)題,后臺(tái)一次性返回2萬(wàn)條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁(yè),怎么操作呢,下面通過(guò)本文介紹下vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表 前端導(dǎo)出問(wèn)題,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue-router的基本使用和配置教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧,需要的朋友可以參考下2018-11-11
Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解
這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程，文中有詳細(xì)的代碼講解，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。首先需要知道：axios不是一種新的技術(shù)。axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶(hù)端，本質(zhì)上也是對(duì)原生XHR的封裝，只不過(guò)它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vuex操作state對(duì)象的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04