P8-v-model雙向繫結
阿新 • • 發佈：2020-12-10
技術標籤：最美前端# VUE【構建vue專案】
P8-v-model雙向繫結
1.v-model概述
在表單使用過程中經常需要填寫填寫表單，顯示填寫的內容，修改表單內容。這些使用場景就會遇到一個問題，表單填寫的內容如何傳遞給data層，data層的資料修改後如何顯示在表單中。
v-model作用：實現表單元素和資料的雙向繫結，解決了上面表單內容傳遞給data，data修改後的資料在表單展示。
2.v-model基本使用
2.1.案例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
< 2.2.案例描述
執行上面的案例，就會出現下面的介面。
1.當我們在輸入框輸入內容時
- 因為input中的v-model綁定了message，所以會實時將輸入的內容傳遞給message，message發生改變。
- 當message發生改變時，因為上面我們使用Mustache語法，將message的值插入到DOM中，所以DOM會發生響應的改變。
所以，通過v-model實現了雙向的繫結。
3.v-model實現原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--
v-model其實是一個語法糖，它的背後本質上是包含兩個操作：
1.v-bind繫結一個value屬性，展示data中message的值
2.v-on指令給當前元素繫結input事件，獲取輸入的內容賦值給message
-->
<input type="text" :value="message" @input="changeMessage">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好VUE'
},
methods: {
changeMessage(event){
this.message = event.target.value;
}
}
})
</script>
</body>
</html>
4. v-model結合radio使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您選擇的性別是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好VUE',
sex: '女'
}
})
</script>
</body>
</html>
5.v-model結合checkbox使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.checkbox單選框-->
<label for="agree">
<!-- 通過點選單選框是否同意協議改變下一步是否可點選狀態 -->
<input type="checkbox" id="agree" v-model="isAgree">同意協議
</label>
<h2>您選擇的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<!--2.v-model第一種方式實現checkbox多選框：將點選內容新增到hobbies陣列，這種方式缺點value資料是寫死的不是由伺服器返回的選項-->
<input type="checkbox" value="籃球" v-model="hobbies">籃球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的愛好是：{{hobbies}}</h2>
<!--3 v-model第二種方式實現checkbox多選框 ：通過動態繫結屬性，在頁面顯示的選項是由伺服器返回的資料；然後將選擇的內容通過v-model傳給hobbies陣列-->
<!-- ①遍歷伺服器返回的可選項資料 -->
<label v-for="item in originHobbies" for="item">
<!-- ②:value="item" 動態繫結已選擇的選項； v-model="hobbies"：將選擇的內容存到hobbies陣列中 -->
<input type="checkbox" :value="item" id="item" v-model="hobbies">{{item}}
</label>
<h2>您的愛好是：{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好VUE',
isAgree: false,
hobbies: [],
originHobbies: ['籃球', '足球', '乒乓球', '羽毛球', '檯球', '高爾夫球']
}
})
</script>
</body>
</html>
6.v-model結合select使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.選擇一個-->
<select name="a" v-model="fruita">
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="菠蘿">菠蘿</option>
<option value="鴨梨">鴨梨</option>
</select>
<h2>您選擇的水果是：{{fruita}}</h2>
<!--2.選擇多個-->
<select name="b" v-model="fruitb" multiple>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="菠蘿">菠蘿</option>
<option value="鴨梨">鴨梨</option>
</select>
<h2>您選擇的水果是：{{fruitb}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruita: '蘋果',
fruitb: []
}
})
</script>
</body>
</html>
7.v-model修飾符使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.修飾符: lazy修飾符可以讓資料在失去焦點或者回車時才會更新-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!--2.修飾符: number，預設情況下，在輸入框中無論我們輸入的是字母還是數字，
都會被當做字串型別進行處理。number修飾符可以讓在輸入框中輸入的內容自動轉成數字型別：
-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>
<!--3.修飾符: trim修飾符可以過濾內容左右兩邊的空格-->
<input type="text" v-model.trim="name">
<h2>您輸入的名字：{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好VUE',
age: 0,
name: ''
}
})
</script>
</body>
</html>