vue如何獲取點擊事件源的方法
更新時間：2017年08月10日 16:55:19 作者：summer0319
本篇文章主要介紹了vue如何獲取點擊事件源的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
整理文檔，搜刮出一個vue如何獲取點擊事件源的方法，稍微整理精簡一下做下分享。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>vue click事件獲取當前元素對象</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body id="app">
<ul>
<li v-on:click="say('hello!', $event)" style="background-color:blue;color:white;">點擊當前行獲取下一行</li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
say: function(msg, event) {
//獲取點擊對象
var el = event.currentTarget;
var li2text = $(el).next().text();
alert("當前對象的內(nèi)容："+$(el).text()+" 下一行內(nèi)容："+li2text);
}
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
響應(yīng)式就是當對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解
在vue中我們使用模板HTML語法來組建頁面的，使用render函數(shù)我們可以用js語言來構(gòu)建DOM，這篇文章主要介紹了vue中的render函數(shù)、h（）函數(shù)、函數(shù)式組件,需要的朋友可以參考下2023-02-02
vue如何使用process.env搭建自定義運行環(huán)境
這篇文章主要介紹了vue如何使用process.env搭建自定義運行環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了Vue編寫一個挺靠譜的多地區(qū)選擇組件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
webpack+vue+express(hot)熱啟動調(diào)試簡單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動調(diào)試簡單配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)瀑布流,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要為大家詳細介紹了如何使用Vue編寫一個簡單的日期選擇器,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Element-UI結(jié)合遞歸組件實現(xiàn)后臺管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
本篇文章主要介紹了vue 掛載路由到頭部導(dǎo)航的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
實際上在學(xué)習(xí)過程中,你會發(fā)現(xiàn)eslint檢查特別討厭,這個時候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下2023-11-11