1.v-model:操作表單雙向數(shù)據(jù)綁定
輸入框
姓名：<input type="text" v-model="name">
單選框:每個(gè)單選框指定相同的屬性，即name="sex"
性別：
<input v-model="sex" type="radio" value="男" name="sex">男
<input v-model="sex" type="radio" value="女" name="sex">女
復(fù)選框
（1）單個(gè)復(fù)選框綁定一個(gè)布爾值
（2）多個(gè)復(fù)選框綁定一個(gè)數(shù)組
<input v-model="hobbies" type="checkbox" value="打游戲">打游戲
<input v-model="hobbies" type="checkbox" value="敲代碼">敲代碼
<input v-model="hobbies" type="checkbox" value="睡覺">睡覺
<input v-model="hobbies" type="checkbox" value="看電影">看電影
選擇框
單選時(shí)炊邦，綁定一個(gè)屬性
地區(qū)：
<select v-model="address">
<option disabled value="請(qǐng)選擇"></option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="天津">天津</option>
</select>
{{address}}
多選時(shí)溯祸，綁定一個(gè)數(shù)組
地區(qū)：
<select v-model="addresses" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="天津">天津</option>
</select>
{{addresses}}
相關(guān)修飾符
lazy修飾符在文本框失去光標(biāo)后铐尚，再更新數(shù)據(jù)
姓名：<input type="text" v-model.lazy="name">{{name}}
number修飾符在文本框輸入數(shù)值轉(zhuǎn)為數(shù)值類型
年齡：<input type="text" v-model.number="age">{{age}}
trim修飾符去除輸入首尾空格
長度：<input type="text" v-model.trim="txt">文本長度：{{txt.length}}
data數(shù)據(jù)
new Vue({
el: "#app",
data() {
return {
msg: '',
isAgree: true,
hobbies: [],
sex: '女',
address: '',
addresses: [],
name: '',
age: 0,
txt: ''
}
}
})
（2）事件修飾符
.prevent,用于阻止默認(rèn)行為
.stop,用于阻止事件冒泡
.once,用于綁定一次事件方法
.self,只能在自身元素上觸發(fā)堂淡，不能再子元素觸發(fā)
使用方法：
<div class="box" @contextmenu.prevent="showbox"></div>
<div class="one" @click.once="one">
<div class="box2" @click.stop="two"></div>
</div>
<div class="two" @click.self="showbox2">
<div class="box3"></div>
</div>
