详细解析vue中的修饰符

1.表单输入框input中的修饰符

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

<input v-model.lazy="msg" >
<h3>{{msg}}</h3>

.number：把输入的数值从字符串或其他类型转换为number类型，我们可以如下应正一下，当没输入值时，p标签显示为string，输入值后显示为number

<input v-model.number="msg" @blur="blurText($event)" >
<h3>{{msg}}</h3>
<p>{{msg1}}</p><script>data:{msg:'',msg1:''
},computed:{msg1:function(){return typeof(this.msg)},
// 输入合法整数
blurText(e) {var boolean = new RegExp('^[1-9][0-9]*$').test(e.target.value)if (!boolean) {this.$message.warning('请输入合法的整数')e.target.value = ''}},
}</script>

.trim:自动过滤用户输入的首尾空格（中间空格过滤不了）

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

2.事件中的修饰符

<!-- 阻止单击事件冒泡，当点击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>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式，先执行外层盒子事件，再执行里面盒子事件 -->
<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>

3.按键修饰符

只有在按enter键时调用submit

<input v-on:keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

详细解析vue中的修饰符相关推荐

vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
关于vue中sync修饰符的用法
.sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且 ...
vue的lazy修饰符和number修饰符、表单结构
目录 vue的lazy修饰符 vue的number修饰符表单的构成表单域表单控件 vue的lazy修饰符在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ...
关于Java中各种修饰符与访问修饰符的说明
关于Java中各种修饰符与访问修饰符的说明类: 访问修饰符修饰符 class 类名称 extends 父类名称 implement 接口名称 (访问修饰符与修饰符的位置可以互换) 访问修饰符 ...

详细解析vue中的修饰符

详细解析vue中的修饰符相关推荐

最新文章

热门文章