本文实例讲述了vue.js绑定事件监听器。分享给大家供大家参考,具体如下:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; meta name=" viewport "
内容="宽度=设备宽度,user-scalable=不,初始=1.0,最大范围=1.0,最小规模=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> www.jb51.net绑定事件监听器& lt;/title>
& lt; !——Vue。js——比;
& lt;脚本src=" https://cdn.bootcss.com/vue/2.5.16/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; p v=靶恪痹谡馐且欢挝谋? lt;/p>
& lt; buttton v:点击=" handleClose "祝辞点击隐藏& lt;/buttton>
& lt;/div>
& lt;/body>
& lt;/html>
& lt; script>//当数据显示的值为真时,p元素会被插入,为假时会被移除
var myData=https://www.yisu.com/zixun/{
显示:真
};
应用var=new Vue ({
埃尔:“#应用”,
数据:myData,//在普通元素上,v可以监听原生的DOM事件,除了点击外,还有dbclick,弹起,mousemove等。表达式可以是一个方法名,这些方法都写在vue实例的方法属性内,并且是函数的形式,函数内的这个指向的是当前vue实例本身,因此可以直接使用this.xxx的形式来访问或者修改数据,如实例中的这个。显示=false;把数据显示修改为了假的,所以点击按钮时,文本p元素就被移除了
方法:{
handleClose:函数(){//这一点。显示=false//在handleClose方法内,直接通过近()调用了接近函数。在示例中是多此一举的,只是用于演示它的用法
this.close ()
},
关闭:函数(){
这一点。显示=false
}
}
})
& lt;/script>
之前
使用本站http://tools.jb51.net/code/HtmlJsRun,可得到如下测试运行效果:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> vue
& lt;脚本src=" https://cdn.bootcss.com/vue/2.5.16/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=安馐浴痹趝{味精}}
& lt; p v=癮rr val”比;
{{val.a}}
& lt;/p>
& lt; a href=" javascript:无效(0)”rel=巴獠縩ofollow”v:点击=傲贰钡脑诘阄? lt;/a>
& lt;/div>
& lt;/body>
& lt;/html>
& lt; script>//窗口。onload=function () {
var app2=new Vue ({
埃尔:“#测试”,
数据:{
味精:“润元装饰”,
msg1:“家”装+新日期(),
msg2:“lianxi”,
显示:没错,
加勒比海盗:[
{一个:“bb”},
{一个:“cc”}
]
},
方法:{
水龙头:函数(){
this.arr.unshift({:‘新’})
}
}
})//}
& lt;/script>
之前
该示例可响应鼠标点击自动增加元素,感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试一下效果。
希望本文所述对大家vue.js程序设计有所帮助。
