suchen

Heim >Web-Frontend >js-Tutorial >So erhalten Sie Ihre eigenen Eigenschaften, indem Sie auf vue.js2.0 klicken

So erhalten Sie Ihre eigenen Eigenschaften, indem Sie auf vue.js2.0 klicken

亚连
亚连Original
2018-06-05 11:35:503102Durchsuche

Im Folgenden werde ich einen Artikel über vue.js2.0 veröffentlichen. Klicken Sie hier, um Ihre eigenen Attribute und JQuery-Methoden zu erhalten. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

ist wie folgt: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="dt">
<p 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)"
    href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" 
    data-href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >
    {{ item.text }}
    </span>
  </p>
  <input type="text" name="" id="index" value=""/>
</p>
</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: &#39;#dt&#39;,
   data: {
    items: [
     { text: &#39;巴士&#39; },
     { text: &#39;快车&#39; },
     { text: &#39;专车&#39; },
     { text: &#39;顺风车&#39; },
     { text: &#39;出租车&#39; },
     { text: &#39;代驾&#39; }
    ]
   },
   methods: {
    onclick:function(event,index){
    console.log(event.target)
    console.log(index)
     event.preventDefault();
     event.stopPropagation();
     
     console.log($("#dongtao").attr(&#39;id&#39;))
     console.log(event.target.parentNode.getAttribute("id"))
  
     console.log(&#39;-------------------&#39;)
     let target = event.target
     console.log(target.getAttribute("data-index"));
     console.log(target.getAttribute("href"));
     console.log(target.getAttribute("data-d"));
     document.getElementById(&#39;index&#39;).value = target.getAttribute("data-index");
    }
   }
  })
// $(&#39;#dongtao&#39;).on(&#39;click&#39;, &#39;.nihao&#39;, function(){
// console.log($(this).index() +"----"+"dddddddddddddddddd" )
// $(this).hide()
// })
// 
// $("input").on(&#39;click&#39;, function(){
// alert(1111)
// })
</script>
</html>

Das Obige habe ich für alle zusammengestellt wird Ihnen in Zukunft nützlich sein.

Verwandte Artikel:

Verwenden der Array filter()-Methode in JavaScript zum Implementieren komprimierter Sparse-Arrays

So lösen Sie das Bindungsproblem im VUE-Framework Das Problem, das Sprudeln bestimmter Ereignisse zu verhindern

Wie man eine JS-Parabelanimation erstellt (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Ihre eigenen Eigenschaften, indem Sie auf vue.js2.0 klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie verwende ich den Modifikator .self in vue.js?Nächster Artikel：Wie verwende ich den Modifikator .self in vue.js?

In Verbindung stehende Artikel

Mehr sehen