vue事件修饰符+v-model双向绑定

约定不等于承诺〃 2022-11-29 03:04 167阅读 0赞

**事件.prevent 阻止默认事件  
事件.stop 阻止事件冒泡  
事件.capture 捕获冒泡 影响冒泡事件的执行顺序  
事件.self 事件只有触发在自己身上才起效  
事件.once 只执行一次事件**

## v-model双向绑定 ##

1.其实就是跟表单元素的value绑定  
2.单选多选 也是跟value绑定 v-mode=“” 与value值相等才选中  
3.菜单写在select标签里 也是跟value绑定 v-mode=“” 与option选项value值相表示选中对应的option

<div id="box">
            <input type="text" v-model="con" >
            <h2>{ { con}}</h2>
            <textarea name="" id="" cols="30" rows="10" v-model="con"></textarea>
            <hr>
            多选框：<input type="checkbox" v-model="flg">
            <h2>{ {  flg }}</h2><hr>
            吃饭   <input type="checkbox" v-model="zt" value="吃饭">
            睡觉   <input type="checkbox" v-model="zt" value="睡觉">
            打豆豆 <input type="checkbox" v-model="zt" value="打豆豆">
            <h2> { { zt}} </h2><hr>
            单选：<input type="radio" v-model="isradio" value="是">是 
                <input type="radio" v-model="isradio" value="否">否
                { { isradio}} <hr>
            <select name="" id="" v-model="select">
                <option >请选择</option>
                <option >前端</option>
                <option >java</option>
                <option >ui</option>
                <option >测试</option>
            </select>
            { {  select }}
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    con:"",
                    flg:true,
                    zt:[],
                    isradio:"是",
                    select:"请选择"
                },
            })
        </script>