vue v-mdel双向绑定

v-model的双向绑定原理

<input type=”text” :value=”msg” @input=”inputValue” />
methods:{
    inputValue(e){
        this.msg=e.target.value
    }
}

<input type=”text” :value=”msg” @input=”msg=$event.target.value” /> //不用方法

v-model双向绑定单选按钮

<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>
data:{sex:’男’}  //默认选中男，为空不选中。单选按钮radio用v-model绑定的时候可以不写name=”sex”

v-model双向绑定复选框

<label for=”agree”>
    <input type=”chenkbox” id=”agree” v-model=”isAgree” />同意条款
</label>
<button :disabled=”!isAgree”>下一步</button>
data{isAgree:false}  //单个复选框v-model绑定的是true和false

<input type=”chenkbox”  value=”篮球”  v-model=”hobbies” />篮球
<input type=”chenkbox”  value=”足球”  v-model=”hobbies” />足球
<input type=”chenkbox”  value=”乒乓球”  v-model=”hobbies” />乒乓球
<input type=”chenkbox”  value=”羽毛球”  v-model=”hobbies” />羽毛球
data:{hobbies:[]}  //多个复选框v-model绑定是一个数组

v-model双向绑定下拉菜单

<select name=”fruit”  v-model=”fruit”>
    <option value=”苹果”>苹果</option>
    <option value=”香蕉”>香蕉</option>
    <option value=”橘子”>橘子</option>
</select>
data:{fruit:”苹果”}  //默认选中苹果

<select name=”fruit”  v-model=”fruits”  multiple>
    <option value=”苹果”>苹果</option>
    <option value=”香蕉”>香蕉</option>
    <option value=”橘子”>橘子</option>
</select>
data:{fruits:[]}  //下拉菜单多选的话，select加multiple属性，并且v-model绑定的是一个数组