1、v-model：雙向資料系結的實作原理 等同于一個 v-bind 加 v-on
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2>
</div>
2、v-model 結合radio型別的使用
<label for="man">
<input type="radio" id="man" value="男" v-model="sex">
</label>
<label for="Wman">
<input type="radio" id="Wman" value="女" v-model="sex">
</label>
<h2>你選擇的性別是：{{sex}}</h2>
3、v-model結合checkbox的使用
1、單選框
<!-- checkbox 單選框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="ischange">同意協議
</label>
<h2>你選擇的是:{{ischange}}</h2>
<button :disabled="!ischange">下一步</button><br><br><br>
2、多選框
<!-- checkbox 多選框 -->
<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">兵乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
<h2>你的愛好是：{{hobbies}}</h2>
4、v-model結合select的使用
1、單選框
<!-- select 單選 --> <select name="" id="" v-model="fruit"> <option value="西瓜">西瓜</option> <option value="蘋果">蘋果</option> <option value="香蕉">香蕉</option> <option value="草莓">草莓</option> </select> <h2>你選擇的水果是：{{fruit}}</h2><br><br>
2、多選框
<!-- select 多選 -->
<select name="" id="" v-model="fruits" multiple>
<option value="西瓜">西瓜</option>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你選擇的水果是:{{fruits}}</h2>
5、值系結 ：動態系結Value的值
<!-- 值系結 -->
<label :for="item" v-for="item in fruitHobbies">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label>
6、v-model修飾符的使用
1、lazy 作用：當文本框失去焦點或按 enter 的時候，v-model 才會執行變數的更新
<!-- 1、lazy修飾符 -->
<label for="active">
<input type="text" id="active" v-model.lazy="message">
</label>
<h2>{{message}}</h2>
2、number 作用：把資料型別轉換乘Number型別
<!-- 2、number修飾符 -->
<!-- 當type的型別為number型別的時候，v-model系結的值自動變成String型別 -->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof(age)}}</h2>
3、、trim 作用：消除字串連邊的空格
<!-- 3、trim 修飾符 -->
<input type="text" v-model="trim">
<h2>{{trim}}</h2>
*******完整代碼*****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2><br>
<label for="man">
<input type="radio" id="man" value="男" v-model="sex">
</label>
<label for="Wman">
<input type="radio" id="Wman" value="女" v-model="sex">
</label>
<h2>你選擇的性別是：{{sex}}</h2><br>
<!-- checkbox 單選框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="ischange">同意協議
</label>
<h2>你選擇的是:{{ischange}}</h2>
<button :disabled="!ischange">下一步</button><br><br><br>
<!-- checkbox 多選框 -->
<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">兵乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
<h2>你的愛好是：{{hobbies}}</h2><br><br><br>
<!-- select 單選 -->
<select name="" id="" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你選擇的水果是：{{fruit}}</h2><br><br>
<!-- select 多選 -->
<select name="" id="" v-model="fruits" multiple>
<option value="西瓜">西瓜</option>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
</select>
<h2>你選擇的水果是:{{fruits}}</h2><br><br>
<!-- 值系結 -->
<label :for="item" v-for="item in fruitHobbies">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label><br><br>
<!-- v-model 修飾符 的使用 -->
<!-- 1、lazy修飾符 -->
<label for="active">
<input type="text" id="active" v-model.lazy="message">
</label>
<h2>{{message}}</h2><br>
<!-- 2、number修飾符 -->
<!-- 當type的型別為number型別的時候，v-model系結的值自動變成String型別 -->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof(age)}}</h2><br>
<!-- 3、trim 修飾符 -->
<input type="text" v-model="trim">
<h2>{{trim}}</h2>
</div>
<body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
message: 'v-model實作原理',
sex: '男',
age:0,
ischange: true,
hobbies: [],
fruit: '香蕉',
fruits: [],
fruitHobbies: ['西瓜', '草莓', '香蕉', '蘋果', '哈密瓜'],
trim:' 去除字串兩邊的空格,控制臺才能看出來 '
}),
methods: {}
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178591.html
標籤：JavaScript
上一篇：echarts水球圖撰寫
下一篇：前端性能優化常用方案