Vue(4)修饰符 + v-model

首先是  事件修饰符，事件修饰符是通过一些简便写法实现一些功能。

1.   .stop  防止事件冒泡

例子

    <div   @click="try"  >
          <p  @click="try"  >绘梨衣</p>
 </div>

点击后 try事件会执行两次

2.   ..prevent  阻止默认行为

  <form>
            <input  type="submit"     @click.prevent="dianji"  value="提交"/>
           </form>

这样写之后就不会自动提交，而是执行点击事件

.once  只执行一次

按键修饰符就不提了

v-model来实现双向数据绑定

1.文本

           <div>
                                <input   type="text"   v-model.lazy="msg"/>
                        <h1>{{msg}}</h1>
            
                                 </div>

请注意，直接在标签里面添加v-model即可

 有单选框  多选框等多种情况

v-model有lazy terim    numbe三个修饰符

作用分别是  失去焦点发生改变   切掉首尾的空格   将字符串变为数字