vue指令（9）v-for

理论知识

• v-for用来循环data中的集合数据，比如数组等。
• v-for='item in arr'或者 v-for='(item,index) in arr',其中item表示每次从arr中遍历处一个元素，index表示元素在arr中的位置，arr表示数据集合。
• 为了提高vue的性能，在使用v-for指令的标签中，添加v-bind:key='item.id'（：key='item.id'），其中item.id用于vue区分兄弟元素，该值唯一代表一个元素。在使用v-for指令的位置，一般都绑定一个key。
• 当使用v-for指令时，插值表达式中根据数据集合中数据的结构的不同，使用不同访问方式。譬如数组中存储对象，要获取对象的某一个属性a的表达式为---item.a。此时key的添加仍然可以使用index。

实践

    <div id="app">
        <div>
            <ul>
                <li  :key='index' v-for='(item,index) in fruit'>{{item+'---'+index}}</li>
            </ul>
        </div>
                <div>
            <ul>
                <li  :key='index' v-for='(item,index) in fruits'>
                    <span>{{item.ename}}---{{item.cname}}</span>
                </li>
            </ul>
        </div>
        </div>
    </div>
    <script type="text/javascript">
        Vue.config.keyCodes.aaa= 65
        var app = new Vue({
            el: '#app',
            data:{
                fruit:['apple','banana','orange'],
                                fruits:[
                                {
                                    ename:'apple',
                                    cname:'苹果'            
                                 },{
                                    ename:'banana',
                                    cname:'香蕉'            
                                 },{
                                    ename:'orange',
                                    cname:'橘子'            
                                 }]
            }
        })