12.VUE表单元素的数据绑定
<script>
let vm = new Vue({
el: "#app",
data: {
msg:"hello world",
cb:false,
hobby:[],
sex:'',
citys:["徐州市","南京市","苏州市"],
city:'',
powerList:[
{id:1,name:"管理员"},
{id:2,name:"老王"},
{id:3,name:"老刘"}],
powerId:'',
},
methods: {},
});
</script>
1.输入框input
v-model和value共存时候, v-model显示
<input type="text" v-model="msg" value="你好,世界">
2.复选框checkbox
v-model会默认触发input标签的input事件,CheckBox和radio的时候会触发change事件
<input type="checkbox" v-model="cb" id="cb" name="cb">
<label for="cb">复选框状态:{{cd}}</label>
<div>
<span>爱好</span>
<label for="lq">篮球</label>
<input type="checkbox" name="hb" id="lq" value="篮球" v-model="hobby">
<label for="zq">足球</label>
<input type="checkbox" name="hb" id="zq" value="足球" v-model="hobby">
<label for="pq">排球</label>
<input type="checkbox" name="hb" id="pq" value="排球" v-model="hobby">
<p>你的爱好:<b v-for="item in hobby">{{item+" " }}</b></p>
</div>
<div>
<span>性别</span>
<label for="nan">男</label>
<input type="radio" value="男" id="nan" name="sex" v-model="sex">
<label for="nv">女</label>
<input type="radio" value="女" id="nv" name="sex" v-model="sex">
<span>你的性别为:{{sex}}</span>
</div>
3.选择框select
<div>
<select name="city" id="city" v-model="city">
<option value="">[请选择]</option>
<option v-for=" c in citys" :key="c">{{c}}</option>
</select>
<span>所在省份:{{city}}</span>
</div>
<div>
<label for="powerId">权限</label>
<select name="powerId" id="powerId" v-model="powerId">
<option value="">【请选择】</option>
<option v-for="p in powerList" :key="p.id" :value="p.id" >{{p.name}}</option>
</select>
<span>选择的是:{{powerId}}</span>
</div>