快捷導(dǎo)航

vue.js2.0點擊獲取自己的屬性和jquery方法

更新時間：2018年02月23日 10:36:33 作者：其實我很乖乖

下面小編就為大家分享一篇vue.js2.0點擊獲取自己的屬性和jquery方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="dt">
<div id="dongtao">
    <span class="nihao" v-for="(item,index) in items" 
    :data-index="index"
    :dt="index"
    v-on:click="onclick($event,index)" 
    :data-d ="JSON.stringify( item)"
     rel="external nofollow" rel="external nofollow" 
    data- rel="external nofollow" rel="external nofollow" >
    {{ item.text }}
    </span>
  </div>
  <input type="text" name="" id="index" value=""/>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
   el: '#dt',
   data: {
    items: [
     { text: '巴士' },
     { text: '快車' },
     { text: '專車' },
     { text: '順風(fēng)車' },
     { text: '出租車' },
     { text: '代駕' }
    ]
   },
   methods: {
    onclick:function(event,index){
    console.log(event.target)
    console.log(index)
     event.preventDefault();
     event.stopPropagation();
     
     console.log($("#dongtao").attr('id'))
     console.log(event.target.parentNode.getAttribute("id"))
  
     console.log('-------------------')
     let target = event.target
     console.log(target.getAttribute("data-index"));
     console.log(target.getAttribute("href"));
     console.log(target.getAttribute("data-d"));
     document.getElementById('index').value = target.getAttribute("data-index");
    }
   }
  })
// $('#dongtao').on('click', '.nihao', function(){
// console.log($(this).index() +"----"+"dddddddddddddddddd" )
// $(this).hide()
// })
// 
// $("input").on('click', function(){
// alert(1111)
// })
</script>
</html>

以上這篇vue.js2.0點擊獲取自己的屬性和jquery方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談vue 移動端完美適配方案
最近接觸了一個項目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細(xì)的來介紹一下，感興趣的可以了解一下
2021-09-09
vue.set() (this.$set)的用法及說明
這篇文章主要介紹了vue.set() (this.$set)的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue實現(xiàn)三級頁面跳轉(zhuǎn)功能
這篇文章主要介紹了vue實現(xiàn)三級頁面跳轉(zhuǎn)功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-05-05
Vue程序調(diào)試和排錯技巧分享
因為程序的調(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處,從而,達(dá)到糾正自己程序錯誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康,所以本文給大家介紹了Vue程序調(diào)試和排錯技巧,需要的朋友可以參考下
2024-12-12
如何使用sm4js進(jìn)行加密和國密sm4總結(jié)
近期由于公司項目的需要開始研究國密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國密sm4的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
hansontable在vue中的基本使用教程
handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下
2022-10-10
詳解Vue slot插槽
這篇文章主要為大家介紹了Vue的slot插槽，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue.js的vue-cli腳手架中使用百度地圖API的實例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
Vue?瀏覽器本地存儲的問題小結(jié)
這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧
2022-04-04
Vue利用vue-baidu-map實現(xiàn)獲取經(jīng)緯度和搜索地址
在開發(fā)項目的時候，發(fā)現(xiàn)需要獲取經(jīng)緯度，由于這個項目是用vue寫的，最后決定使用vue-baidu-map來快速獲取經(jīng)緯度，感興趣的可以了解一下
2022-09-09