【vue】v-for

v-for遍历数组

在模板中使用v-for

v-for="item in items，同v-for="item of items"。

//helloworld.vue
<template>
    <ul>
    <!-- <li v-for="city in cities" v-bind:key="city">{{city}}</li> -->
    <li v-for="(city,idx) in cities" v-bind:key="city">{{city}}-{{idx}}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return {
            cities:['深圳','杭州','南昌']
        }
    }
}
</script>

使用render函数

//helloworld.vue
<template>
    <Helloworld/>
</template>

<script>
export default {
    components:{
        "Helloworld":{
            render:function(createElement){
                return createElement(
                    'ul',
                    // this.cities.map(
                    //     city => createElement(
                    //         'li',
                    //         {
                    //             key:city
                    //         },
                    //         city
                    //     )
                    // )
                    this.cities.map(
                        (city,idx) => createElement(
                            'li',
                            {
                                key:city
                            },
                            `${city}-${idx}`
                        )
                    )
                )
            },
            data:function(){
                return {
                    cities:['深圳','杭州','南昌']
                }
            }
        }
    }
}
</script>

v-for遍历对象

在模板中使用v-for

//helloworld.vue
<template>
    <ul>
        <li v-for="(value,key,idx) of obj" 
            v-bind:key="value">
            {{key}}-{{value}}-{{idx}}
        </li>
    </ul>
</template>

<script>
export default {
    data(){
        return {
            obj:{
                a:"hello",
                b:"world"
            }
        }
    }
}
</script>

使用render函数

//helloworld.vue
<template>
    <Helloworld/>
</template>

<script>
export default {
    components:{
        "Helloworld":{
            render:function(createElement){
                return createElement(
                    'ul',
                    Object.keys(this.obj).map(
                        (key,idx) => createElement(
                            'li',
                            {
                                key:key
                            },
                            `${key}-${this.obj[key]}-${idx}`
                        )
                    )
                )
            },
            data:function(){
                return {
                    obj:{
                        a:"hello",
                        b:"world"
                    }
                }
            }
        }
    }
}
</script>

v-for遍历一个整数

在模板中使用v-for

//helloworld.vue
<template>
    <ul>
        <li v-for="n in 10" v-bind:key="n">{{n}}</li>
    </ul>
</template>
// 依次输出:1 2 3 4 5 6 7 8 9 10

使用render函数

//helloworld.vue
<template>
    <Helloworld/>
</template>

<script>
export default {
    components:{
        "Helloworld":{
            render:function(createElement){
                return createElement(
                    'ul',
                    Array.apply(null,{length:10}).map(
                        (item,idx) => createElement(
                            'li',
                            {
                                key:idx+1
                            },
                            idx+1
                        )
                    )
                )
            }
        }
    }
}
</script>

v-for 包裹多个元素

用<template>包裹多个元素，但在最终渲染的元素里不包含<template>元素。

在模板中使用v-for

//helloworld.vue
<template>
    <dl>
    <template v-for="(value,key) in obj">
        <dt v-bind:key="key">{{key}}</dt>
        <dd v-bind:key="value">{{value}}</dd>
    </template>
    </dl>
</template>

<script>
export default {
    data(){
        return {
            obj:{
                "鱼香肉丝":"鱼香肉丝里没有鱼",
                "夫妻肺片":"夫妻肺片里没有肺"
            }
        }
    }
}
</script>

使用render函数

//helloworld.vue
<template>
    <Helloworld/>
</template>

<script>
export default {
    components:{
        "Helloworld":{
            render:function(createElement){
                return createElement(
                    'dl',
                    Object.keys(this.obj).map(
                        key =>  [
                            createElement('dt',{key:key},key),
                            createElement('dd',{key:this.obj[key]},this.obj[key])
                        ]
                    )
                )
            },
            data:function(){
                return {
                    obj:{
                        "鱼香肉丝":"鱼香肉丝里没有鱼",
                        "夫妻肺片":"夫妻肺片里没有肺"
                    }
                }
            }
        }
    }
}
</script>

v-for实例:Todos

//index.js
import Vue from "vue";
import Todos from "./todos.vue";
const vm = new Vue({
    render:createElement => createElement(Todos)
}).$mount('#root');

//todos.vue
<template>
<div>
    <form v-on:submit.prevent="handleSubmit">
        <input type="text" v-model="todoTitle" placeholder="请输入"/>
        <input type="submit" value="新增">
    </form>
    <ul>
        <TodoItem v-for="(todo,idx) in todos" 
                    v-bind:key="todo.id"
                    v-bind:title="todo.title"
                    v-on:removeTodo="handleRemove(idx)"
        />
    </ul>
</div>
</template>

<script>
const todos = [
    {id:1,title:"吃饭"},
    {id:2,title:"睡觉"},
    {id:3,title:"打豆豆"}
]
let nextId = 4;

import TodoItem from "./todoItem.vue";
export default {
    data:function(){
        return {
            todos,
            nextId,
            todoTitle:""
        }
    },
    methods:{
        handleRemove:function(idx){
            this.todos.splice(idx,1);
        },
        handleSubmit:function(){
            let title = this.todoTitle.trim();
            if(!title) return;
            let newItem = {
                idx:this.nextId++,
                title:title
            }
            this.todos.push(newItem);
            this.todoTitle = "";
        }
    },
    components:{
        TodoItem
    }
}
</script>

//todoItem.vue
<template>
    <li>
        <span>{{title}}</span>
        <button v-on:click="handleClick">删除</button>
    </li>
</template>

<script>
export default {
    props:{
        title:String
    },
    methods:{
        handleClick:function(){
            this.$emit("removeTodo");
        }
    }
}
</script>