对Vue.js之事件的绑定(:或者@ )详解

1、Vue.js事件绑定的一般格式

:click=' function '

v-:点击/鼠标移出/鼠标悬停/

@点击

2、Vue.js事件绑定的实现

2.1 JavaScript代码

脚本类型=' text/JavaScript ' src=' http :/js/Vue-1。0 .21 .js/脚本脚本类型=' text/JavaScript '窗口。onload=function(){ VM=new Vue({ El : ' # app }，data: {arrMsg: ['apple '，' orage '，' pear']}，methods : { show 3360 function(){ alert(this。arrmsg)；}} });}/script2.2 html代码

div id=' app ' class=' container ' HR/事件的绑定方式一，v-on指令按钮类型=' button ' v-: click=' show ' class=' BTN BTN-BTN初选-默认'显示数据/button hr/事件的绑定方式二，简写方式button type=' button ' @ click=' show ' class=' BTN BTN-成功BTN-默认'显示数据/button /div2.3运行结果

3、完整代码

！DOCTYPE html html hearta charset=' UTF-8 ' title/title link rel='样式表href='./CSS/bootstrap。量滴CSS ' rel='外部无跟随'/脚本类型=' text/JavaScript ' src=' http :/js/Vue-1。0 .21 .js/脚本脚本类型=' text/JavaScript '窗口。onload=function(){ VM=new Vue({ El : ' # app '，data: {arrMsg: ['apple '，' orage '，' pear']})，方法3360 { show 3360 function(){//使用这访问数据警惕(这个。arrmsg)；}} });}/脚本/头体！-形式- !-v-:点击='函数v-:点击/鼠标移出/鼠标悬停/db点击-div id=' app ' class=' container ' HR/事件的绑定方式一，v-on指令（要加一个：)按钮类型=' button ' v-: click=' show ' class=' BTN BTN-BTN初选-默认'显示数据/buttonhr/事件的绑定方式二，简写方式(@)按钮类型=' button ' @ click=' show ' class=' BTN BTN-成功' BTN-默认'显示数据/button/div /body /html以上这篇对Vue.js之事件的绑定(:或者@ )详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。