本文摘自PHP中文网,作者coldplay.xixi,侵删。
click在vue里实现的方法:首先新建html代码页面;然后在这个代码页面上创建【<div>】标签;接着创建点击事件函数;最后给点击按钮添加vue的点击事件,并保存html代码。
本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。
click在vue里实现的方法:
1、新建一个html代码页面,然后在这个代码页面上创建一个<div>
标签,同时个这个<div>标签添加一个id为app,然后在这个<div>标签里创建一个点击按钮。
1 2 3 |
|
2、引入vue.js文件,创建一个<script>
标签,在这个标签里面使用 new Vue({})
进行vue的实例化。
1 2 3 4 5 6 |
|
3、创建点击事件函数。在vue官网给定的methods里面创建vue点击事件触发的方法(案例中创建点击事件触发时弹出一个alert弹出)。
1 2 3 4 5 |
|
4、给点击按钮添加vue的点击事件。在点击按钮标签里面添加上@click="test"
即可。
1 2 3 |
|
5、保存html代码,然后使用浏览器进行打开,在浏览器页面点击按钮事件,这个时候就可以看浏览器上弹出一个alert弹出框,表示vue点击事件已成功执行。
全部代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
相关免费学习推荐:JavaScript(视频)
以上就是click在vue里怎么实现的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
移动端web开发中click,touch,tap事件使用详解
$nexttick vs settimeout,看看它们的差异
更多相关阅读请进入《click》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者