zoukankan      html  css  js  c++  java
  • 详解vue中的修饰符

    对表单中的修饰符

    .lazy: 加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新。不加lazy则是在keyup就更新

    <input v-model.lazy="msg" >
    

    .number: 对输入的类型进行限制

    <input v-model.number="msg">
    

    .trim: 自动过滤输入的首尾空格

    <input v-model.trim="msg">
    

    对事件的修饰符

    <!-- 阻止单击事件冒泡,当点击box2时就不会触发box1的点击事件,若不加则会触发 -->
    <div class="box1" @click="btn">
    	<div class="box2" @click.stop="btn1"></div>
    </div>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联,阻止默认事件  -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 添加事件侦听器时使用事件捕获模式,先执行外层盒子事件,再执行里面盒子事件 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当事件在该元素本身(而不是子元素)才去执行 -->
    <div v-on:click.self="doThat">...</div>
     
    <!-- click 事件只能点击一次,2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>
    

    按键修饰符

    <!-- 只有在按enter键时调用submit -->
    <input v-on:keyup.enter="submit">
        
    .tab:制表键
    .delete:含delete和backspace键
    .esc:返回键
    .space: 空格键
    .up:向上键
    .down:向下键
    .left:向左键
    .right:向右键
    
  • 相关阅读:
    【转】内部Handler类引起内存泄露
    检测是否存在相机硬件代码
    asp.net 过滤器
    iis 中经典和集成模式对应webconfig节点
    事务
    C# Excel操作
    一步一步部署SSIS包图解教程
    js和.net操作Cookie遇到的问题
    File,FileInfo,Directory,DirectoryInfo
    C#文件Copy
  • 原文地址:https://www.cnblogs.com/xyf724/p/13267850.html
Copyright © 2011-2022 走看看