vue基础之事件v-onclick='函数'用法示例

本文实例讲述了某视频剪辑软件基础之事件v-onclick=函数用法。分享给大家供大家参考，具体如下：

v-:单击/鼠标移出/鼠标悬停/dbl click/鼠标向下.

事件：

' :click='函数v-:单击/鼠标移出/鼠标悬停/dbl click/鼠标向下.

新Vue({ el:'#box '，data:{ //数据arr:['苹果','香蕉','橘子','梨】，json: { a: '苹果，b: '香蕉，c: '橘子} }，方法： { show : function(){//方法，这里是展示，不能用警报警报(1);} }});实例：为数据添加数据

！titlewww.jb51.net为数据添加数据/title style/style脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' # box '，data:{ //数据arr:['苹果','香蕉','橘子','梨】，json: { a: '苹果，b: '香蕉，c: '橘子}，方法： { add : function(){ this。由…改编推动('番茄');//这个指代new Vue()，也是data } } })；};/script/headbody div id='box '输入类型='按钮'值='按钮v-: dbl单击=' add()' br ul Li v-for=' arr中的值" {value}} /li /ul /div/body/html运行效果：

实例：点击按钮，div显示/消失，切换v-show='a '

！titlewww.jb51.net点击按钮，div显示/消失，切换v-show=' a '/title style/style脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' # box '，data:{ //数据a:true }，方法： { adjust 3360 function(){ console。日志(这个。a)；如果(这个。a==true){这。a=假；} else { this . a=true } } } })；};/script/headbody div id='box '输入类型='按钮'值='按钮v-:单击='调整()' div style=' width :100 px高度：100 px背景：红色' v-show=' a '/div/div/body/html实例：vue简易留言本

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue简易留言本/title style /style link rel='样式表href=' https://cdn。bootcss。com/Twitter-bootstrap/2。3 .2/CSS/bootstrap。量滴CSS ' rel='外部' nofollow '脚本src=' http :3358 libs。百度。com/jquery/1。7 .2/jquery。量滴js /脚本脚本src=' http :3359 cdn。bootcss。com/Twitter-bootstrapthis . username=this . age=}，删除msg :函数(n){ if(n==-2){ this。my data=[]；}else{ this.myData.splice(n，1)；} } } });};/script/head body div class=' container ' id=' box ' form role=' form ' div class=' form-group '标签为='用户名'用户名：/标签输入类型=' text ' id=' username ' class=' form-control ' placeholder='输入用户名v-model=' username '/div class=' form-group '标签为='年龄'年龄：/标签输入类型=' text ' id=' age ' class=' form-control '占位符='输入年龄v-model=' age '/div class=' form-group '输入类型='按钮'值='添加类别=BTN BTN-主' v-:点击='添加()'输入类型='重置'值='重置BTNBTN危险/div/form HR表类=' table table-带边框的表格-悬停caption class='h3 text-info '用户信息表/caption tr class=' text-danger ' th class=' text-center '序号' th class='文本中心'名字' th class='文本中心'年龄' th class='文本中心'操作/th/tr class=' text-center ' v-for='(item，index)在myDATa ' TD { { index 1 } }/TD { { item。 名称} }/TD { { item。age } }/TD TD TD button class=' BTN BTN-主BTN-sm ' data-toggle=' modal ' data-target=' # layer ' v-: click=' now index=$ index '删除/button/TD/tr tr v-show=' my DATa。长度！=0 ' TD col span=' 4 ' class=' text-right ' button class=' BTN BTN-危险BTN-sm ' v-: click=' now index=-2 ' data-toggle=' modal ' data-target=' # layer '删除全部/button/TD/tr v-show=' mydata。长度==0 ' TD colspan=' 4 ' class=' text-center text-muted ' p暂无数据./p /td /tr /table！-模态框弹出框- div角色=' dialog ' class=' modal fade bs-example-modal-sm ' id=' layer ' div class=' modal-dialog ' div class=' modal-content ' div class=' modal-header ' button type=' button ' class=' close ' data-misse=' modal ' span/span/button H4 class=' modal-title '确认删除么？/H4/div class='模式-正文-右'按钮数据-dispose=' modal ' class=' BTN BTN-主BTN-sm '取消/button button data-dispose=' modal ' class=' BTN BTN-危险BTN-sm ' v-: click=' delete msg(现在是索引)'确认/button/div/div/div/body/html运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。