侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论
vue

v-for的认识

woku
2022-03-09 / 0 评论 / 0 点赞 / 170 阅读 / 3,190 字

概述

v-for是用来做列表渲染的一个内置指令

写法:v-for="指令表达式"

指令表达式的几种形式:

  • 枚举对象属性:

    (value, key, index) in list

    value是键值,key是键名,index是下标(名称任意取,但是要符合变量命名)

  • 遍历可迭代对象:

    (item, index) of list

    item是数组元素别名,index是下标(名称任意取,但是要符合变量命名)

  • 使用in/of

    (item, index) in list

    (Item, index) of list

其中,index是可选项.list是组件中要遍历的数据

基本使用

遍历可迭代对象

    <script>
        let listComp = {
            data() {
                return {
                    list: [
                        {
                            id: 1,
                            name: 'zs'
                        }, {
                            id: 2,
                            name: 'ls'
                        }, {
                            id: 3,
                            name: 'ww'
                        }
                    ]
                }
            },
            template: `
              <ul>
                <li v-for="(item, index) of list" :key="item.id">
                    <p>{{item.name}}</p>
                </li>
              </ul>
            
            `
        }
        const vm = Vue.createApp(listComp)
        vm.mount('#app')
    </script>

v-for中的key:这个key必须是唯一的值,而且是不变的,方便vue就地更新策略的实施,具体请看

枚举对象属性

枚举对象的顺序是按照Object.keys()的结果进行枚举

    <script>
        let infoComp = {
            data() {
                return {
                    personInfo: {
                        id: 0,
                        age: 20,
                        name: 'woku',
                        study: ['vue', 'js', 'webpack']
                    }
                }
            },
            template: `
              <ul>
                <li v-for="(value, key, index) in personInfo" :key="index">
                    <p>No: {{index + 1 }}</p>
                    <template v-if="key === 'study'">
                        <ul>
                            <li v-for="(item, index) of value" :key="index">
                                {{ item }}
                            </li>
                        </ul>
                    </template>
                    <template v-else>
                        <div>{{ value }}</div>
                    </template>
                </li>
              </ul>
            
            `
        }
        const vm = Vue.createApp(infoComp)
        vm.mount('#app')
    </script>

计算属性与v-for

    <script>
        let infoComp = {
            data() {
                return {
                    list: [{
                        id: 1,
                        name: 'zs',
                        score: 49,
                    }, {
                        id: 2,
                        name: 'ls',
                        score: 98,
                    }, {
                        id: 3,
                        name: 'ww',
                        score: 66
                    }]
                }
            },
            template: `
                <ul>
                    <li v-for="(item, index) of computedList" :key="index">
                        <p>{{ item.name }}</p>
                        <p :style="{color: item.pass ? 'green' : 'red'}">
                            {{ item.pass ? 'pass' : 'failed'}}
                        </p>
                    </li>
                </ul>
            
            `,
            computed: {
                computedList() {
                    return this.list.map(item => {
                        item.pass = item.score >= 60
                        return item
                    })
                }
            }
        }
        const vm = Vue.createApp(infoComp)
        vm.mount('#app')
    </script>

methods与v-for

    <script>
        let infoComp = {
            data() {
                return {
                    myArr: [[1, 2], [3, 4], [5, 6, 7, 8]]
                }
            },
            template: `
                <ul>
                    <li v-for="(item, index) of myArr" :key="index">
                        <p>{{ item.name }}</p>
                        <p v-for="(item2, index) of even(item)">
                            {{ item2 }}
                        </p>
                    </li>
                </ul>
            `,
            methods: {
                even(val) {
                    return val.filter(item => item % 2 === 0)
                }
            }
        }
        const vm = Vue.createApp(infoComp)
        vm.mount('#app')
    </script>

值范围

            template: `
                <ul>
                    <li v-for="s of 5" :key="s">
                        {{s}}
                    </li>
                </ul>
            `,

template与v-for

当要渲染的节点没有父节点时,可以使用template

    <script>
        let infoComp = {
            data() {
                return {
                    myArr: [1, 2, 3]
                }
            },
            template: `
            <div>
                <template v-for="item of myArr" :key="item">
                    <div>{{ item }}</div>
                </template>
            </div>
            `,
        }
        const vm = Vue.createApp(infoComp)
        vm.mount('#app')
    </script>

组件与v-for

  <script>
        // 组件部分
        let listItem = {
            props: {
                item: Object
            },
            template: `
              <li>
                <p>{{item.name}}</p>
                <p>{{item.age}}</p>
              </li>
            
            `
        }
        let infoComp = {
            components: {
                listItem
            },
            data() {
                return {
                    list: [
                        {
                            id: 1,
                            name: 'wyg',
                            age: 20
                        }, {
                            id: 2,
                            name: 'zs',
                            age: 24
                        },   {
                            id: 3,
                            name: 'ls',
                            age: 39
                        }
                    ]
                }
            },
            template: `
            <div>
                <ul>
                   <list-item v-for="item of list" :key="item.id" :item="item"></list-item>
                </ul>
            </div>
            `,
        }
        const vm = Vue.createApp(infoComp)
        vm.mount('#app')
    </script>

item是不会自动的传入组件的,避免v-for与组件功能数据耦合

让组件有更多的可配置性

达到更好的复用效果

0

评论区