Home > Article > Web Front-end > How to get your own properties by clicking in vue.js2.0

How to get your own properties by clicking in vue.js2.0

亚连Original: 2018-06-05 11:35:503005browse

Below I will share with you an article about vue.js2.0. Click to get your own properties and jquery methods. It has a good reference value and I hope it will be helpful to everyone.

is as follows:

<!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>

The above is what I compiled for everyone. I hope it will be useful to you in the future. Everyone is helpful.

Use the Array filter() method to compress sparse arrays in JavaScript

How to solve the problem of binding in the VUE framework Problem of preventing bubbling of certain events

How to make JS parabolic animation (detailed tutorial)

The above is the detailed content of How to get your own properties by clicking in vue.js2.0. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use modifier .self in vue.js?Next article：How to use modifier .self in vue.js?

See more

How to get your own properties by clicking in vue.js2.0

Related articles