VUE学习：vue基础14————表单元素的事件绑定问题

提示：
VUE学习：vue基础14————表单元素的事件绑定问题

---

前言

本文继续学习Vue相关内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考# 表单元素的事件绑定问题

value和v-model

value和v-model共存的情况下，文本框会显示v-model的值

v-model默认会触发input标签的input事件，checkbox和radio的时候会触发change事件

<div id="app" v-cloak>
   
    <input type="text" value="你好，世界" v-model="msg">
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello world",
        },
        methods: {}
    });
</script>

复选框

<div id="app" v-cloak>
    <input type="checkbox" v-model="cb" id="cb" name="cb" value="复选框">
    <label for="cb">复选框状态：{{cb}}</label>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            cb:false,
        },
        methods: {}
    });
</script>

复选框实例

<div id="app" v-cloak>
    <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>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            hobby:['足球'],
        },
        methods: {}
    });
</script>

单选框

<div id="app" v-cloak>
    <div>
        <span>性别</span>
        <label for="nan">男</label>
        <input type="radio" value="男" id="nan" name="sex" v-model="sex">
        <label for="nan">女</label>
        <input type="radio" value="女" id="nv" name="sex" v-model="sex">
        <span>您的性别是：{{sex}}</span>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            sex:'女',
        },
        methods: {}
    });
</script>

下拉框

<div id="app" v-cloak>
    <div>
        <label for="powerId">权限</label>
        <select name="powerId" id="powerId" v-model="powerId">
            <option v-for="p in powerList" :key="p.id" :value="p.id">{{p.name}}</option>
        </select>
        <span v-for="p in powerList" v-if="p.id===powerId">您选择的权限是:&nbsp;&nbsp;&nbsp;&nbsp;{{p.name}}</span>
    </div>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            powerList:[{id:1,name:'管理员'},{id:2,name:'运维'},{id:3,name:'客户'}],
            powerId:3
        },
        methods: {}
    });
</script>