对Vue.js之事件的绑定(v-on: 或者 @ )详解
更新时间:2018年09月15日 09:11:51 作者:Bwz_Learning
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
1、Vue.js事件绑定的一般格式
v-on:click='function'
v-on:click/mouseout/mouseover/
@click
2、Vue.js事件绑定的实现
2.1 JavaScript代码
<script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() { vm = new Vue({ el: '#app', data: { arrMsg: ['apple', 'orage', 'pear'] }, methods: { show: function() { alert(this.arrMsg); } } }); } </script>
2.2 html代码
<div id="app" class="container"> <hr /> 事件的绑定方式一,v-on指令 <button type="button" v-on:click='show' class="btn btn-primary btn-default">显示数据</button> <hr/>事件的绑定方式二,简写方式 <button type="button" @click="show" class="btn btn-success btn-default">显示数据</button> </div>
2.3 运行结果
3、完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() { vm = new Vue({ el: '#app', data: { arrMsg: ['apple', 'orage', 'pear'] }, methods: { show: function() { //使用this访问数据 alert(this.arrMsg); } } }); } </script> </head> <body> <!--形式--> <!--v-on:click="函数" v-on:click/mouseout/mouseover/dbclick--> <div id="app" class="container"> <hr /> 事件的绑定方式一,v-on指令(要加一个:) <button type="button" v-on:click='show' class="btn btn-primary btn-default">显示数据</button> <hr/>事件的绑定方式二,简写方式(@) <button type="button" @click="show" class="btn btn-success btn-default">显示数据</button> </div> </body> </html>
以上这篇对Vue.js之事件的绑定(v-on: 或者 @ )详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
element中datepicker日期选择器选择周一到周日并实现上一周和下一周的方法
最近项目中需要用到日期选择器,所以这里给大家总结下,这篇文章主要给大家介绍了关于element中datepicker日期选择器选择周一到周日并实现上一周和下一周的相关资料,需要的朋友可以参考下2023-09-09vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等,下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果,感兴趣的朋友一起看看吧2018-08-08el-elementUI使用el-date-picker选择年月
本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02vscode中vue代码提示与补全没反应解决(vetur问题)
这篇文章主要给大家介绍了关于vscode中vue代码提示与补全没反应解决(vetur问题)的相关资料,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下2023-03-03
最新评论