Vue.js instruction V-for use and index acquisition _javascript skills

1.v-for

directly on the code.

Example one:

<! DOCTYPE html>

    {text: ' Downwind '},
   {text: ' Taxi '},
   {text: ' Driver '}}}
 )
 </script>
</body >

2. Index

Within the V-for block we have full access to the properties within the parent component's scope, and a special variable $index, which, as you can guess, is the index of the current array element:

<ul id= "Example-2" >
 <li v-for= "item in Items" >
 {{parentmessage}}-{{$index}}}-{{item.message}}
 </li>
</ul>

var example2 = new Vue ({
 el: ' #example-2 ',
 data: {
 parentmessage: ' Parent ',
 items: [
 {message: ' Foo '},
 {message: ' Bar '}}}

Alternatively, you can assign an alias to the index (if V-for is used for an object, you can assign an alias to the object's key):

<div v-for= "(Index, item) in items" >
 {{index}} {{item.message}}}
</div>

You can use the of delimiter from 1.0.17 to get closer to the JavaScript iterator syntax:

<div v-for= "Item of items" ></div>

Example two:

<! DOCTYPE html>  

3. In the Click event to fetch the index

Method one: Adding Custom attributes

Example three:

<! DOCTYPE html>  

Method Two: Direct incoming index value

example four (and two approximately):

<! DOCTYPE html>

},

 methods: {

 onclick:function (index) {

//Index.preventdefault ();

 Console.log (index);

 document.getElementById (' index '). Value = index;

}

 }

</script>

</body>

 
 

The effect is the same as the method.

If you want to pass the index directly, you can use the following methods:

Example five:

 <! DOCTYPE html> 
 

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.