Vue.js v-for

1/对象迭代 v-for

 

<li v-for="value in object">的value就是下面的花括号里面的value,如果js里面是数组表达那么value就是object的每一条数据啦，如果不是数组表达，那么就是object里面的每一条结果值啦

//html
<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>

//js
new Vue({
    el: '#repeat-object',
    data: {
        object: {
            //如果不是数组表达式，那么value就是后面的值，换成数组表达就是如下的写法
            message: 'John',
            LastName: 'Doe',
            Age: 30
        }
    }
});

　　

//html
<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ value.message }}
    </li>
    <li v-for="value in object">
         {{ value.LastName }}
    </li>
</ul>

//js
new Vue({
    el: '#repeat-object',
    data: {
        object: [{
            //如果不是数组表达式，那么value就是后面的值，换成数组表达就是如下的写法
            message: 'John',
            LastName: 'Doe'
        }]
    }
});

　　

2/加入参数index，必须放在后面

//html
<div>
    <ul>
        <li v-for="(option,index) in options">
            <p class="text-success" @click="getIndex(index)">Text:{{option.text}}--Value:{{option.value}}</p>
        </li>
    </ul>
    <div v-if="isNaN(click)==false">
        <span>你点击的索引为: {{ click }}</span>
    </div>
    <div v-else>
        <p class="text-danger">试着点击上方LI条目</p>
    </div>
</div>

//js
new Vue({
    el: 'div',
    data: {
        click: 'null',
        options: [
            { text: '上海市', value: '20' },
            { text: '湖北省', value: '43' },
            { text: '河南省', value: '45' },
            { text: '北京市', value: '10' }
        ]
    },
    methods:{
        getIndex:function($index){
            this.click=$index;
        }
    }
});