vue中的.native修饰符

最新推荐文章于 2023-04-24 11:18:17 发布
最新推荐文章于 2023-04-24 11:18:17 发布
阅读量281 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsm4623/article/details/105433388
版权

.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。

官网的解释：
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的

比如在vue+element中给input添加keyup事件时，如果不添加.native会无效

海阔天空BM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-elementui限制input只能输入数字校验
MtiredM的博客
10-25 1508
vue-elementui限制input只能输入数字校验 说明 关于@input.native，由于elementui中对html的属性做了封装，所以使用html的原生属性需要添加“.native” @input.native=“formatNumber(‘area’)” // 正常英文输入法情况下输入框输入内容变化时对输入数据的处理 @compositionend.native=“formatNumber(‘area’)” // 中文输入法下输入内容变化时对输入数据的处理 formatNumb
keyup.native在el-input中的使用
seimeii的博客
07-22 676
keyup.native使用
iView 中使用 @input 做逻辑判断无效问题
qq_44051062的博客
02-10 1128
iView 中使用 @input 做逻辑判断无效问题 原因： 在ui框架中的 @input 与原生的input 不一样，在ui框架中的 @input 不是原生的 @input ，而 native 可以使@input 指向原生的 input 事件 。这点大家可以简单写个 input 验证一下。 解决方法：使用 native 。在@input 后面加上 native ，这样@input 后面的逻辑就会生效。 参考了网上文章 ，但是那链接没了，就不贴参考链接了 ...
vue中组件需要.native才能触发原生事件
YLXB2的博客
04-30 2509
问题描述： <input@keyup.enter="myClick()"></input> <el-input@keyup.enter.native="myClick()"></el-input> 以上两个例子都能够通过键盘事件触发myClick()方法，为什么在<el-input></el-input>上需要.n...
el-input 按键绑定Enter方法、 .native 的含义与使用、vue锚点跳转、路由跳转下一页默认停留在顶部
weixin_44817062的博客
08-16 2144
el-input 按键绑定Enter方法、 .native 的含义与使用、vue锚点跳转、路由跳转下一页默认停留在顶部 一、el-input 按键绑定Enter方法 给enter键绑定@click="searchEntInfo()查询方法 @keyup.enter.native="searchEntInfo" 二、@click.native中 .native 的含义与使用 .native：侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际
web前端之vue知识点
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
12-08 6808
web前端之vue知识点
详解Vue.js中.native修饰符
12-29
这篇文章给大家介绍Vue.js中.native修饰符，感兴趣的朋友一起看看吧。 .native修饰符 官方对.native修饰符的解释为： 　有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。...
Vue 按键修饰符处理事件的方法
08-27
Vue 按键修饰符是 Vue 框架中的一种特殊处理事件的方法，它允许开发者轻松地处理键盘事件，无需关心 keyCode 的值。 Vue 按键修饰符主要分为两大类：按键别名和系统修饰键。 按键别名是 Vue 为常用的按键提供的...
Vue事件修饰符native、self示例详解
10-16
主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
.native的使用
m0_46639734的博客
04-24 963
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符。以上就是今天要讲的内容，本文仅仅简单介绍了v-on的.native修饰符的使用，还有许多其他的事件修饰符，我们后续讨论。
el-input-number无法实时监听输入事件？我的解决办法
Dawnchen1的博客
03-22 6301
el-input-number无法实时监听输入事件？我的解决办法 一般来说el-input-number的@change方法只会在blur的时候触发，那如何实时监听输入数字的变化呢? 步骤一：将@change替换成@input.native <el-input-number :ref="'ref' + $index" v-model="row.energy" @input.native="handleInput(row, $index)" :precision="3"
el-input无法绑定键盘事件？浅析.native修饰符的作用与原理（绊脚石系列）
小安驾到的博客
09-21 1422
为什么el-input无法绑定键盘事件？为什么.native可以为组件标签绑定原生事件？
Element系列之el-input-number无法实时监听数据变化的解决方法
老__L的博客
05-17 6972
el-input-number无法实时监听数据变化的解决方法
（四）.native修饰符与$listeners属性
AhCola
01-06 337
一. .native修饰符 .native修饰符的作用就是将原生dom事件绑定到组件，看一个例子，加以理解： <div id="app1"> <base-input @input="myAlert($event)"></base-input> </div> <script type="text/javas...
vue中native的用法
qq_61153907的博客
01-13 595
在普通标签上加上native会报错且事件无效。在自定义标签上加上navtive，点击事件正常生效，在自定义事件上不加navtive不会报错但事件无效。
vue实现输入密码时显示明文，过一秒变为密文
WanFengZhou
05-28 2603
<el-form :model="changePassword" ref="ruleForm" label-width="100px"> <el-form-item label="新密码：" prop="password"> <el-input @input.native="onInput($event, 'newPassword')" ...
vue循环生成元素_Vue循环中多个input绑定指定v-model实例
weixin_35561837的博客
01-13 4549
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢这里介绍两种：一种是v-for中循环生成的输入框,一种是在element-table中生成的输入框在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-mode...
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur
热门推荐
zuo-yiran的博客
01-23 17万+
一、@input（或者是v-on:input） 使用： &lt;input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" v-on:input="search" value="" /&gt; 适用于实时查询，每输入一个字符都会触发该事件。如图： 二、@keyup.enter 该事件与v-on:input事件的区别在于：i
vue的.native 修饰 ，解决iview中input 无法监听enter事件
Joe的博客
04-27 6900
有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on。例如： 直接写成下面这样enter事件将无效 <Input type="password" v-model="password" placeholder="password" @keyup.enter="handleSubmit()"> <Icon type="ios-...
elementUI .native修饰符
最新发布
05-31
在Vue.js中，当我们需要在子组件中监听父组件的原生事件时，可以使用`.native`修饰符。在ElementUI中，`.native`修饰符通常被用于监听组件上的原生事件，例如`@click.native`可以监听组件上的原生click事件。这样做...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值