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