前端应用_Vue_ v-for 指令的四种使用方式（已经齐全了，不要再找了）

V-for 指令 取数组的值

<div id="pp" >

  <p  v-for="item,index in list">每一项的值为：{{item}}-----索引值为：{{index}}</p>

</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                   list:["小狗","小猫","乌龟","金鱼","大闸蟹"]

                }
            }
        )
    </script>

</div>

  v-for="item,index in list"

item 相当于是 value 值， index是 索引值 index ， index 可以不写， 然后遍历list ，

list 在data 里定义好的.

显示的结果为：

循环 对象数组

<div id="pp" >

  <p  v-for="item,index in list">每一项的id为：{{item.id}}, 对应的name等于==={{item.name}}-----索引值为：{{index}}</p>

</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                   list:[{id:1,name:"小狗"},{id:2,name:"小猫"},{id:3,name:"金鱼"},{id:4,name:"大闸蟹"}]

                }
            }
        )
    </script>

</div>

显示的效果 ：

遍历对象

<div id="pp" >
 <p  v-for="item,key,index in list">索引为：{{index}}，他的kye 为： {{key}} ，并且他的value是 {{item}},</p>
</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el: '#pp',
                data: {
                   list: {id:1,name:"laownag",age:34,like:{sport:"足球",music:"流行"}}
                }
            }
        )
    </script>
</div>

效果为：

注意 ： 在遍历对象的时候 ，除了 value key 还有一个索引

v-for 迭代数字

这个更好理解， 相当于我们python 里的， for i in range（9） 的效果差不多 ，

<p  v-for="item,index in 9">索引为：{{index}}，并且他的value是 {{item}},</p>

显示的结果为 ：