✨: Vue的双向绑定v-model
:东非不开森的主页
:如果有幸和你一起学习一起进步,那就太棒啦
双向绑定v-model:数据不仅能能从data流向页面,还可以从页面流向data
双向绑定一般都应用在表单类元素 input select
v-model:value可以简写为v-model 因为v-model默认收集的就是value值
v-model实现双向绑定
<input type="text" name="" id="" v-model="message" />
⭐⭐
v-model的原理其实是背后有两个操作
<input type="text" :value="message" @input="inputChange">
<input type="text" v-model="message" />
这两种是一样的效果
⭐⭐
绑定表单类型textarea(文本域)
<textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
⭐⭐
v-model绑定checkbox分为:
checkbox单选框:绑定到属性中的值是一个Boolen
<label for="agree">
<input type="checkbox" name="" id="agree" v-model="isAgree" />同意协议
</label>
2. 多个复选框:
checkbox多选框;绑定到属性中的值是一个Array
<!-- 2.checkbox多选框;绑定到属性中的值是一个Array ,多选框当中,继续明确的绑定一个value值-->
<div class="hobbies">
<h2>请选择你的爱好</h2>
<label for="sing">
<input type="checkbox" id="sing" v-model="hobbies" value="sing"/>唱歌
</label>
<label for="coding">
<input type="checkbox" id="coding" v-model="hobbies" value="coding"/>敲代码
</label>
</div>
.⭐⭐
v-model绑定radio,用于选择其中一项;
案例:选择性别的时候,只能选一个
<label for="male">
<input type="radio" id="male" v-model="gender" value="male" />男
</label>
<label for="female">
<input type="radio" id="male" v-model="gender" value="female"/>女
</label>
⭐⭐
select也分单选和多选两种情况:
单选:只能选中一个值
<div id="app">
<!-- select的单选 -->
<select name="" id="" v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
</select>
<h2>单选:{{fruit}}</h2>
</div>
多选:可以选中多个值
<div id="app">
<!-- select的多选 -->
<select name="" id="" multiple v-model="fruits">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
</div>
.⭐⭐
举例:select的值绑定
<select name="" id="" multiple size="3" v-model="fruits">
<option v-for="item in allFruits" :key="item.value" :value="item.value">
{{item.text}}
</option>
</select>
⭐⭐
用法:直接加在v-model后面就可以了
比如
// lazy
<input type="text" name="" id="" v-model.lazy="message" />
//number
<input type="text" v-model.number="counter" />
//trim
<input type="text" v-model.trim="content" />