Comment utiliser le modificateur .native dans Vue.js

Cette fois, je vais vous montrer comment utiliser le modificateur .native dans Vue.js. Quelles sont les précautions lors de l'utilisation du modificateur .native dans Vue.js. Voici des cas pratiques. regarder. .

Modificateur .native

L'explication officielle du modificateur .native est :

Parfois, vous souhaiterez peut-être ajouter Écouter un natif événement sur l'élément. Vous pouvez utiliser le modificateur v-on .native . Par exemple :

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

Une compréhension simple est :

Écoutez un événement pour la balise HTML ordinaire , puis ajoutez le . modificateur natif car cela ne fonctionnera pas. Par exemple :

Code HTML

<p id="app">
　　<a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
</p>

JavaScriptcode

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

Résultat

Écoutez un événement sur l'élément racine d'un composant, puis ajoutez le modificateur .native et cela fonctionnera. Par exemple :

Code HTML

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

Code JavaScript

Vue.component('my-component', {
　　template: `click me`
})
new Vue({
　　el: '#app',
　　methods: {
　　　　clickFun: function(){
　　　　　　console.log("message: success")
　　　　}
　　}
})

Résultats

Je te crois lisez cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser vue pour optimiser les performances de vérification SMS

Comment implémenter vue-i18n et vue en vue projet element-ui développement international

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!