So erhalten Sie Ihre eigenen Eigenschaften, indem Sie auf vue.js2.0 klicken-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-06-05 11:35:50

Original

3101 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!