vue v-model的使用和原理

v-model的实际操作

<input type="text" :value="message" v-on:input="valueChange">

<script>
...
methods: {
	valueChange(event){
		this.message = event.target.value
	}
}
</script>

v-model => 语法糖 是绑定更改值属性

---

结合v-model:radio

<!-- radio -->
        <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>
        <h2>你当前选择的是: {{sex}}</h2>
data: {
	sex: '男'
}

---

结合v-model: checkbox

 <!-- checkbox -->
        <!-- 单选 -->
        <label for="agreement">
            <input type="checkbox" id="agreement" v-model="isAgree">同意协议
        </label>
        <h2>你的选择是: {{isAgree}}</h2>

        <button :disabled="!isAgree">next</button>
        <br>
        <!-- 多选 -->
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <h2>你的爱好是 {{hobbies}}</h2>

...
data: {
	isAgree: false,
    hobbies: []
}

---

结合v-model和select

 <!-- select -->
        <!-- 选择1个 -->
        <select name="abc" v-model="fruit">
            <option value="苹果" >🍓</option>
            <option value="香蕉" >🍌</option>
            <option value="橘子" >🍊</option>
        </select>

        <h2>你的选择是: {{fruit}}</h2>
        <!-- 选择多个 -->
        <select name="abc" v-model="fruits" multiple>
            <option value="苹果" >🍓</option>
            <option value="香蕉" >🍌</option>
            <option value="橘子" >🍊</option>
        </select>

        <h2>你的选择是: {{fruits}}</h2>
        ...
        data: {
			fruit: '',
			fruits: []
		}

---

值绑定

绑定原始值

 <label v-for="item in originHobbies">
            <input type="checkbox"  :value="item" v-model="hobbies">{{item}}
        </label>

---

修饰符

1. lazy 失去焦点更新

v-model.lazy="xxx"

2. number
   v-model 默认赋值为string,如果需要数字类型

v-model.number="xxx"

3. trim
   过滤内容左右空格

v-model.trim="xxx"