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>

posted on 2018-10-10 20:24 紅葉阅读(324) 评论(0) 编辑收藏举报