vue之v-for

Posted yuyujuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue之v-for相关的知识,希望对你有一定的参考价值。

vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同。

对象遍历

value 是遍历得到的属性值,key 是遍历得到的属性名,index 是遍历次序,这里的 key/index 都是可选参数,如果不需要,这个指令其实可以写成 v-for="value in me";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
          <ul>   
              <li v-for="value in object">
                {{ value }}
              </li>
        </ul>
    </div>
    <script>
        var demo = new Vue({
            el:#demo,
            data:{
                
                object: {
                      firstName: John,
                      lastName: Doe,
                      age: 30
                }
            }
        })
    </script>    
</body>
</html>

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
         <div  v-for="(value, key,index) in object">
         {{ index }} : {{ key }} : {{ value }}
        </div>
    </div>
    <script>
        var demo = new Vue({
            el:#demo,
            data:{
                
                object: {
                      firstName: John,
                      lastName: Doe,
                      age: 30
                }
            }
        })
    </script>    
</body>
</html>

技术分享图片

数组遍历

数组遍历和对象遍历相类似,最大的不同点在于对象的 “key” 和 “index” 是一致的,所以这里我们只需要取一个 index 即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
         <ul>
            <li v-for="(item, index) in items" v-on:click="onclick(index)">{{index}}:{{item}}</li>
        </ul>
    </div>
    <script>
        var demo = new Vue({
            el:#demo,
            data:{
                items: [apple, tomato, banana, watermelon]
            },
            methods:{
                onclick(index){
                    alert(index);
                }
            }
        })
    </script>    
</body>
</html>

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <ul>
             <li v-for="todo in items">
                    {{ todo.message}}   
              </li>
        </ul>
         <ul>
             <li v-for="(item, index) in items">
                    {{ parentMessage }} - {{ index }} - {{ item.message }}
              </li>
        </ul>
    </div>
    <script>
        var demo = new Vue({
            el:#demo,
            data:{
                parentMessage: Parent,
               items: [
                      { message: Foo },
                      { message: Bar }
                ],
            }
        })
    </script>    
</body>
</html>

技术分享图片

 

以上是关于vue之v-for的主要内容,如果未能解决你的问题,请参考以下文章

vue之v-for

204vue之v-for的“就地复用”和“key使用”

204vue之v-for的“就地复用”和“key使用”

vue的注意规范之v-if 与 v-for 一起使用

一起学Vue之列表渲染

Vue.js前端框架系统学习——Vue指令之v-for, v-on, v-bind, v-model