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>