用于表单解构 所显示的值只依赖所绑定的数据 不在关心初始化插入的值(插入的值会被绑定的值覆盖)
-
v-model 在文本框的用法
vue中必须定义了 value
<body>
<div id="demo">
<input type="text" v-model="value"> 'value在data中必须有定义'
{{value}}
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
value:''
}
})
</script>
页面输出结果
在多行文本框中的使用
同样 所显示的值只依赖所绑定的数据 不在关心初始化插入的值(插入的值会被绑定的值覆盖)
输出结果：
多个单选框
<input type="radio" v-model:checked="star" name="1" value="HB">黄渤
<input type="radio" v-model:checked="star" name="1" value="ZYX">张艺兴
<input type="radio" v-model:checked="star" name="1" value="SHL">孙红雷
现在选中的是： {{star}} 'star 就是 选中的 value的值'
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
onceraido:false,
star:'HB' '绑定的是input 的Value的值'
}
})
</script>
输出结果
单个单选框 + 单个复选框
- 单个单选用v-bind
- 单个复选可以用 v-bind 或v-model
多个复选框
多个复选框：
红色：<input type="checkbox" v-model:check="checksArr" value="hs">
绿色：<input type="checkbox" v-model:check="checksArr" value="ls">
黄色：<input type="checkbox" v-model:check="checksArr" value="yellow">
'下边三个是绑定的字符串'
白色：<input type="checkbox" v-model:check="checks" value="bs">
蓝色：<input type="checkbox" v-model:check="checks" value="blue">
紫色：<input type="checkbox" v-model:check="checks" value="zs">
{{checksArr}}
{{checks}}
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
checksArr:[],
checks:'',
onceraido:false,
star:'HB'
}
})
输出结果
单选下拉框
单选下拉框：</br>
<select name="" id="" v-model="selected">
<option value="风扇" >风扇</option>
<option value="空调">空调</option>
<option value="空气净化器">空气净化器</option>
<option value="扇子">扇子</option>
</select>
{{selected}}
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
selected:'' '也可以写 selected:[] 但是返回的都是字符串 因为这是单选下拉框'
}
})
多选下拉框
<select name="select" v-model="selectedList" multiple>
<option value="风扇" selected>风扇</option>
<option value="空调">空调</option>
<option value="空气净化器">空气净化器</option>
<option value="扇子">扇子</option>
</select>
{{selectedList}}
</div>
</body>
<script>
var app = new Vue({
el:'#demo',
data:{
selectedList:[] '绑定的是数组'
})
