3.Vue对象遍历

JavaScript012

3.Vue对象遍历,第1张

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

value是遍历得到的属性值，

key是遍历得到的属性名，

index是遍历次序，

这里的 key l index都是可选参数，如果不需要，这个指令其实可以写成v-for="value in me"

数组中index和key一样

在vue的项目中经常会用到的数组遍历,数组遍历的时候我们需要用到vue中的v-for,写法是v-for="自定义一个名字(这个名字可以任意) in 你要循环的数组(这个名字必须是你的数组的名字)" .

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>list</title>

</head>

<body>

<ul id="list">

    <li v-for="item in items">

        {{ item.message }}

    </li>

    <br>

    <li v-for="(item,index) in items">

        {{index}}:{{ item.message }}

    </li>

    <br>

    <template v-for="item in items">

        <li>{{ item.message }}</li>

        <li>--------------</li>

    </template>

    <br>

    <li v-for="value in object">

        {{ value }}

    </li>

    <br>

    <li v-for="(value,key) in object">

        {{key}}:{{ value }}

    </li>

    <br>

    <li v-for="n in 10">{{ n }}</li>

    <br>

    <li v-for="n in numbers">{{ n }}</li>

</ul>

<!--of 替代 in-->

<script src="js/vue.js"></script>

<script>

    var vm = new Vue({

        el:"#list",

        data: {

            items: [

                {message: 'Foo' },

                {message: 'Bar' }

            ],

            object: {

                FirstName: 'John',

                LastName: 'Doe',

                Age: 30

            },

            numbers: [ 1, 2, 3, 4, 5 ]

        },

        computed:{

            list:function(){

                this.items.push({ message: 'Baz' })

            },

            evenNumbers: function () {

                return this.numbers.filter(function (number) {

                    return number % 2 === 0

                })

            }

        }

    })

</script>

</body>

</html>