vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
更新時(shí)間：2018年07月07日 11:56:19 作者：_code小學(xué)生
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue.js綁定事件監(jiān)聽器。分享給大家供大家參考，具體如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chabaoo.cn 綁定事件監(jiān)聽器</title>
<!-- Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">這是一段文本</p>
<buttton v-on:click="handleClose">點(diǎn)擊隱藏</buttton>
</div>
</body>
</html>
<script>
//當(dāng)數(shù)據(jù)show的值為true時(shí)，p元素會(huì)被插入，為false時(shí)會(huì)被移除
var myData = {
show:true
};
var app = new Vue({
el:'#app',
data:myData,
//在普通元素上，v-on可以監(jiān)聽原生的DOM事件，除了click外，還有dbclick、keyup、mousemove等。表達(dá)式可以是一個(gè)方法名，這些方法都寫在vue實(shí)例的methods屬性內(nèi)，并且是函數(shù)的形式，函數(shù)內(nèi)的this指向的是當(dāng)前vue實(shí)例本身，因此可以直接使用this.xxx的形式來訪問或者修改數(shù)據(jù)，如實(shí)例中的this.show = false;把數(shù)據(jù)show修改為了false，所以點(diǎn)擊按鈕時(shí)，文本p元素就被移除了
methods:{
handleClose:function () {
// this.show = false
//在handleClose方法內(nèi)，直接通過close()調(diào)用了close函數(shù)。在示例中是多此一舉的，只是用于演示它的用法
this.close()
},
close:function () {
this.show = false
}
}
})
</script>
使用本站HTML/CSS/JS在線運(yùn)行測(cè)試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測(cè)試運(yùn)行效果：
再來看一個(gè)例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="test">{{msg}}
<p v-for="val in arr">
{{val.a}}
</p>
<a href="javascript:void(0)" rel="external nofollow" v-on:click="tap">點(diǎn)我</a>
</div>
</body>
</html>
<script>
// window.onload= function(){
var app2 = new Vue ({
el:"#test",
data:{
msg:'潤(rùn)元裝飾',
msg1:"家裝"+new Date(),
msg2:'lianxi',
show:true,
arr:[
{a:'bb'},
{a:'cc'}
]
},
methods:{
tap : function(){
this.arr.unshift({a:'new'})
}
}
})
// }
</script>
該示例可響應(yīng)鼠標(biāo)點(diǎn)擊自動(dòng)增加元素，感興趣的朋友可以使用HTML/CSS/JS在線運(yùn)行測(cè)試工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試一下效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- javascript如何刪除所有事件監(jiān)聽器
- JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示
- 關(guān)于js中removeEventListener取消事件監(jiān)聽的坑
- vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互實(shí)例
- vuejs2.0實(shí)現(xiàn)分頁組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法
- javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
- 一文詳解JavaScript的事件監(jiān)聽(最新整理)
相關(guān)文章
iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊
這篇文章主要介紹了iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對(duì)頁面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問題,無法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
vue/react項(xiàng)目刷新頁面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法
Vue項(xiàng)目打包部署到線上后,刷新頁面會(huì)提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項(xiàng)目刷新頁面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法,文中將解決的辦法介紹的很詳細(xì),需要的朋友可以參考下2023-05-05
vue中el-table實(shí)現(xiàn)可拖拽移動(dòng)列和動(dòng)態(tài)排序字段
最近公司需要做個(gè)項(xiàng)目,需要拖拽表格和自定義表格字段,本文主要介紹了vue中el-table實(shí)現(xiàn)可拖拽移動(dòng)列和動(dòng)態(tài)排序字段,具有一定吃參考價(jià)值,感興趣的可以了解一下2023-12-12
vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)
本文主要介紹了element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
有時(shí)候我們使用el-table的選擇框時(shí),如果涉及修改、刪除時(shí),可能一次只允許用戶選擇一條,這樣的話如果使用頂部的全選復(fù)選框就不合適了,這篇文章主要給大家介紹了關(guān)于el-table表頭全選框隱藏或禁用設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了Vue3基于rem比例H5縮放方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了vue如何通過params和query傳值(刷新不丟失)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue在data中定義變量后依舊報(bào)undefined的解決
這篇文章主要介紹了vue在data中定義變量后依舊報(bào)undefined的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03