分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

Vue.js中.native修饰符

发布时间:2023-09-06 01:50责任编辑:赖小花关键词:js

.native修饰符

官方对.native修饰符的解释为:

  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:

<my-component v-on:click.native="doTheThing"></my-component>

简单点理解就是:

  • 给普通的HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。例如:

HTML代码 

<div id="app">  <a href="#" v-on:click.native="clickFun">click me</a></div>

 JavaScript代码 

new Vue({  el: ‘#app‘,  methods: {    clickFun: function(){      console.log("message: success")    }  }})

结果

  • 给某个组件的根元素上监听一个事件,之后添加 .native 修饰符就会起作用了。例如:

HTML代码

<div id="app">  <my-component v-on:click.native="clickFun"></my-component></div>

JavaScript代码 

Vue.component(‘my-component‘, {  template: `<a href=‘#‘>click me</a>`})new Vue({  el: ‘#app‘,  methods: {    clickFun: function(){      console.log("message: success")    }  }})

结果

Vue.js中.native修饰符

原文地址:https://www.cnblogs.com/duniang/p/8929656.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved