v-mode的基本用法
input和area的用法
可以用于input框，以及textarea等
： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value
<input type="text" v-model='value'>
{{value}}
<hr>
<textarea name="" id="" cols="30" rows="10" v-model='msg'>我是多行文本的初始化值</textarea>
<br>
{{msg}}
<hr>
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '',
oneradio: true,
checkname: '猫蛋'
}
})
image.png
单选框
- 单个单选按钮，直接用vbind绑定一个布尔值，用vmodel是不可以的
- 如果是组合使用，就需要vmodel来配合value使用，绑定选中的单选框的value值，
此处所绑定的初始值可以随意给
多个单选框:
v-modelS绑定的是单选框的value值
猫蛋 <input type="radio" name="checks" value="猫蛋" v-model='checkname'> <br>
狗蛋 <input type="radio" name="checks" value="狗蛋" v-model='checkname'> <br>
翠花 <input type="radio" name="checks" value="翠花" v-model='checkname'> <br>
现在选中的是: -------{{checkname}}
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '',
oneradio: true,
checkname: '猫蛋'
}
})
image.png
复选框
单个复选框，直接用定一个布尔值，可以用vmodel可以用vbind
2.多个复选框– 如果是组合使用，就需要vmodel来配合value使用，vmodel绑定一
个数组—如果绑定的是字符串，则会转化为true。false，与所有绑定的复选框的
checked属性相对应
复选框
单个复选框---用v-bind: <input type="checkbox" v-bind:checked='oneradio'>
多个复选框---用v-model: <input type="checkbox" v-model='oneradio'>
<br>
多个复选框:
猫蛋: <input type="checkbox" value="猫蛋" v-model='checks'> <br>
狗蛋: <input type="checkbox" value="狗蛋" v-model='checks'> <br>
翠花: <input type="checkbox" value="翠花" v-model='checks'> <br>
<br>
现在选中了{{checks}}
<hr>
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '',
oneradio: true,
checkname: '猫蛋',
checks: []
}
})
image.png
下拉框
- 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优
先匹配一个value值，没有value就匹配一个text值 - 如果是多选，就需要vmodel来配合value使用，vmodel绑定一个数组，与复选框类
似 - vmodel一定是绑定在select标签上
单选的下拉框:
<select v-model='selected'>
<option value="猫蛋">猫蛋</option>
<option value="狗蛋">狗蛋</option>
<option value="翠花">翠花</option>
</select>---现在选中的是{{selected}}
<br>
<br>
<br>
<br>
多选的下拉框
<select v-model='selectedmul' multiple>
<option value="猫蛋">猫蛋</option>
<option value="狗蛋">狗蛋</option>
<option value="翠花">翠花</option>
</select>---现在选中的是{{selectedmul}}
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '',
oneradio: true,
checkname: '猫蛋',
checks: [],
selected: [],
selectedmul: []
}
})
image.png
绑定值
- 单选框
只需要用vbind给单个单选框绑定一个value值，此时，vmodel绑定的就是他的value值
<input type="radio" v-model='picked' v-bind:value="value"> {{picked}}
image.png
-复选框
----选中和不选中的value不一样
复选框按钮:
<input type="checkbox" v-model='toggle' :true-value="value1" :false-value="value2">
<br>
{{toggle}} <br>
被选中 {{toggle === value1}} <br>
未被选中 {{toggle === value2}} <br>
image.png
- 下拉框
在select标签上绑定value值对option并没有影响
<select v-model='valueselect' :value="{num: 111}">
<option :value="{num: 111}">猫蛋</option>
<option value="狗蛋">狗蛋</option>
<option value="翠花">翠花</option>
</select>---现在选中的是{{typeof valueselect}} ---{{valueselect.num}}
image.png
修饰符
lazy
*——vmodel默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其
在失去焦点或者敲回车键之后在更新
<input type="text" v-model='inputstr'> --------{{inputstr}} <br>
<input type="text" v-model.lazy='lazyStr'> --------{{lazyStr}} <br>
image.png
number
*—————— 将输入 的字符串转化为number类型
number:
<input type="text" v-model.number='isNum'> <br>
{{typeof isNum}}
image.png
trim
trim自动过滤输入过程中收尾输入的空格
<input type="text" v-model.trim='trimStr'> <br> {{trimStr.split('').length}}
image.png
简述v-model的作用
-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值
