快捷導(dǎo)航

vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法

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

下面小編就為大家分享一篇vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<!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: '快車(chē)' },
     { text: '專(zhuān)車(chē)' },
     { text: '順風(fēng)車(chē)' },
     { text: '出租車(chē)' },
     { 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點(diǎn)擊獲取自己的屬性和jquery方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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