Vue 中 onclick和@click区别解析

2024-03-01 0 213
目录
  • 一、直接上结论
  • 二、验证代码,可直接运行
  • 三、点击结果

一、直接上结论

  • onclick 只能触发 js的原生方法,不能触发vue的封装方法
  • @click 只能触发vue的封装方法,不能触发js的原生方法

二、验证代码,可直接运行

<!DOCTYPE html>
<html lang=\”en\”>
<head>
<meta charset=\”UTF-8\”/>
<meta http-equiv=\”X-UA-Compatible\” content=\”IE=edge\”/>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”/>
<title>探索onclick和@click的区别</title>
</head>
<body>
<!– 主体区域 –>
<section id=\”app\”>
<button class=\”clear-completed\” onclick=\”jsMethod()\”>onclick使用js中的方法</button><br>
<button class=\”clear-completed\” @click=\”jsMethod()\”>@click使用js中的方法</button><br>
<button class=\”clear-completed\” onclick=\”vueMethod()\”>onclick使用vue中的方法</button><br>
<button class=\”clear-completed\” @click=\”vueMethod()\”>@click使用vue中的方法</button>
</section>
<!– 底部 –>
<script src=\”https://cdn.jsdelivr.net/npm/vue/dist/vue.js\”></script>
<script>
const app = new Vue({
el: \’#app\’,
data: {
},
methods: {
vueMethod() {
console.log(\”您触发了vue内部方法!\”)
}
}
})
function jsMethod() {
console.log(\”您触发了js方法!\”)
}
</script>
</body>
</html>

三、点击结果

Vue 中 onclick和@click区别解析

补充:

vue.js @click和v-on:click有什么区别?没有区别,@ 只是一个 v-on: 的缩写,为了书写方便。

Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:v-bind 缩写

<!– 完整语法 –>
<a v-bind:href=\”url\” rel=\”external nofollow\” rel=\”external nofollow\” ></a>
<!– 缩写 –>
<a :href=\”url\” rel=\”external nofollow\” rel=\”external nofollow\” ></a>
v-on 缩写
<!– 完整语法 –>
<a v-on:click=\”doSomething\”></a>
<!– 缩写 –>
<a @click=\”doSomething\”></a>

到此这篇关于Vue 中 onclick和@click区别的文章就介绍到这了,更多相关Vue onclick和@click区别内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • vue基础之事件v-onclick=\”函数\”用法示例
  • vue中@click绑定事件点击不生效的原因及解决方案
  • Vue如何给组件添加点击事件 @click.native
  • vue中@click绑定事件点击不生效的解决
  • vue自定义组件@click点击失效问题及解决
  • vue中@click和@click.native.prevent的区别
  • vue button的@click方法无效钩子函数没有执行问题

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript Vue 中 onclick和@click区别解析 https://www.u-9.cn/biancheng/javascript/182038.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务