做算命類網(wǎng)站違法嗎?商業(yè)推廣
v-model介紹
v-model是vue的雙向綁定的指令，能將頁(yè)面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會(huì)在更新data綁定屬性時(shí)候，更新頁(yè)面上輸入控件的值。在view層，model層相互需要數(shù)據(jù)交互，即可使用v-model。
- 雙向綁定一般都應(yīng)用在表單類元素上（如：
input、select等） v-model:value?可以簡(jiǎn)寫(xiě)為?v-model，因?yàn)?code>v-model默認(rèn)收集的就是value值
v-model原理
v-model主要實(shí)現(xiàn)了兩個(gè)功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會(huì)更新view層數(shù)值變化。
1. input輸入值后更新data
首先在頁(yè)面初始化時(shí)，vue編譯器會(huì)編譯該html模板文件，將d頁(yè)面上的dom元素遍歷生成一個(gè)虛擬的dom樹(shù)再遞歸虛擬dom的每一個(gè)節(jié)點(diǎn)，當(dāng)匹配到的是一個(gè)元素而非純文本，則繼續(xù)遍歷每個(gè)屬性，如果遍歷到v-model這個(gè)屬性，則會(huì)為這個(gè)節(jié)點(diǎn)添加一個(gè)input書(shū)簡(jiǎn)，當(dāng)監(jiān)聽(tīng)從頁(yè)面輸入值的時(shí)候，來(lái)更新vue實(shí)例中data相對(duì)應(yīng)的屬性值
2. data屬性賦值后更新input值
同樣初始化vue實(shí)例的時(shí)候，會(huì)遍歷data的每一個(gè)屬性，并通過(guò)defineProperty來(lái)監(jiān)聽(tīng)每一個(gè)屬性的get和set方法，從而一旦某個(gè)屬性重新賦值，則能監(jiān)聽(tīng)到變化來(lái)操作響應(yīng)的頁(yè)面控制；
v-model通過(guò)view層更新data的原理：可以理解為在input框里面通過(guò)v-bind動(dòng)態(tài)綁定一個(gè)value，然后在input框里面通過(guò)@input方法去動(dòng)態(tài)獲取input輸入的值，然后重新給變量賦值就可以。
v-model基本使用
v-model雙向綁定，既輸入框的value改變，對(duì)應(yīng)的message對(duì)象值也會(huì)改變，修改message的值，input的value也會(huì)隨之改變。無(wú)論改變那個(gè)值，另外一個(gè)值都會(huì)變化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input type="text" v-model="message">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: "hello"}})
</script>
</body>
</htmlv-model 代碼實(shí)現(xiàn)
先來(lái)一個(gè)demo實(shí)現(xiàn)不使用v-model實(shí)現(xiàn)雙向綁定。
實(shí)現(xiàn)雙向綁定需要是用v-bind和v-on，使用v-bind給input的value綁定message對(duì)象，此時(shí)message對(duì)象改變，input的值也會(huì)改變。但是改變input的value并不會(huì)改變message的值，此時(shí)需要一個(gè)v-on綁定一個(gè)方法，監(jiān)聽(tīng)事件，當(dāng)input的值改變的時(shí)候，將最新的值賦值給message對(duì)象。獲取事件對(duì)象，target獲取監(jiān)聽(tīng)的對(duì)象dom，value獲取最新的值。v-model = v-bind + v-on$event
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!-- $event獲取事件對(duì)象，$event.target.value獲取input值 -->
<!-- <input type="text" :value="message" @input="changeValue($event.target.value)">{{message}}--><!--事件調(diào)用方法傳參了，寫(xiě)函數(shù)時(shí)候省略了小括號(hào)，但是函數(shù)本身是需要傳遞一個(gè)參數(shù)的，這個(gè)參數(shù)就是原生事件event參數(shù)傳遞進(jìn)去--><input type="text" :value="message" @input="changeValue">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: "hello world"},methods: {changeValue(event){console.log("值改變了");this.message = event.target.value}}})
</script>
</body>
</html>v-model結(jié)合radio類型使用
radio單選框的屬性是互斥的，如果使用v-model，可以不使用name就可以互斥。
v-model綁定sex屬性，初始值為“男”，選擇女后sex屬性變成“女”，因?yàn)榇藭r(shí)是雙向綁定。
<div id="app"><!-- name屬性radio互斥 使用v-model可以不用name就可以互斥 --><label for="male"><input type="radio" id="male" name="sex" value="男" v-model="sex">男</label><label for="female"><input type="radio" id="female" name="sex" value="女" v-model="sex">女</label><div>你選擇的性別是：{{sex}}</div></div><script src="../js/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"zzz",sex:"男"},})</script>v-model結(jié)合復(fù)選框類型使用
checkbox可以結(jié)合v-model做單選框，也可以多選框。
checkbox結(jié)合v-model實(shí)現(xiàn)單選框，定義變量初始化為，點(diǎn)擊checkbox的值為，也是。isAgree false true isAgree true
checkbox結(jié)合v-model實(shí)現(xiàn)多選框，定義數(shù)組對(duì)象，用于存放愛(ài)好，將與checkbox對(duì)象雙向綁定，此時(shí)選中，一個(gè)多選框，就多一個(gè)true，就添加一個(gè)對(duì)象。hobbies hobbies hhobbies
單選
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--單選框--><h2>單選框</h2><label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意協(xié)議</label><h3>您的選選擇是：{{isAgree}}</h3><button :disabled="!isAgree">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {isAgree: true}
})
</script>
</body>
</html>多選
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--多選框--><h2>多選框</h2><input type="checkbox" name="hobby" value="籃球" v-model="hobbies">籃球<input type="checkbox" name="hobby" value="足球" v-model="hobbies">足球<input type="checkbox" name="hobby" value="羽毛球" v-model="hobbies">羽毛球<input type="checkbox" name="hobby" value="乒乓球" v-model="hobbies">乒乓球
<h2>你的愛(ài)好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {hobbies: []}
})
</script>
</body>
</html>值的綁定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--多選框--><h2>多選框</h2><label :for="item" v-for="(item,index) in hhobbies" :key="index"><input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{{item}}</label><h2>你的愛(ài)好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {hobbies: [],hhobbies: ["籃球","足球","乒乓球","羽毛球"]}
})
</script>
</body>
</html>v-model結(jié)合select
v-model結(jié)合select可以單選也可以多選。
<!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>v-model結(jié)合select類型</title>
</head>
<body><div id="app"><!-- select單選 --><select name="fruit" v-model="fruit"><option value="蘋(píng)果">蘋(píng)果</option><option value="香蕉">香蕉</option><option value="西瓜">西瓜</option></select><h2>你選擇的水果是：{{fruit}}</h2><!-- select多選 --><select name="fruits" v-model="fruits" multiple><option value="蘋(píng)果">蘋(píng)果</option><option value="香蕉">香蕉</option><option value="西瓜">西瓜</option></select><h2>你選擇的水果是：{{fruits}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el:"#app",data:{fruit:"蘋(píng)果",fruits:[]},})</script>
</body>v-model修飾符使用
- lazy：默認(rèn)情況下是實(shí)時(shí)更新數(shù)據(jù)，加上，從輸入框失去焦點(diǎn)，按下enter都會(huì)更新數(shù)據(jù)
- number：默認(rèn)是字符串類型，使用復(fù)制為數(shù)字類型
- trim：用于自動(dòng)過(guò)濾用戶輸入的首尾空白字符
<!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>v-model修飾符</title>
</head>
<body><div id="app"><h2>v-model修飾符</h2><h3>lazy,默認(rèn)情況是實(shí)時(shí)更新數(shù)據(jù)，加上lazy，從輸入框失去焦點(diǎn)，按下enter都會(huì)更新數(shù)據(jù)</h3><input type="text" v-model.lazy="message"><div>{{message}}</div><h3>修飾符number,默認(rèn)是string類型，使用number賦值為number類型</h3><input type="number" v-model.number="age"><div>{{age}}--{{typeof age}}</div><h3>修飾符trim:去空格</h3><input type="text" v-model.trim="name"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"zzz",age:18,name:"ttt"},})</script>
</body>
</html>