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

事件.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>