Vue 8-数组循环渲染

最新推荐文章于 2023-05-12 14:37:21 发布

Sukie_

最新推荐文章于 2023-05-12 14:37:21 发布

阅读量917

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Lin16819/article/details/100936377

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文详细探讨了Vue.js中如何使用v-for指令进行数组循环渲染，包括其工作原理、注意事项以及最佳实践。通过实例代码解析，帮助开发者掌握在实际项目中高效运用数组渲染的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- template模板占位符包可以在渲染时不渲染自己，只渲染它包裹的子元素，注意:key=''不能用在template模板中 -->
        <template v-for='(item, index) of list'>
            <div :key='item.id'>
                {{item.text}} --- {{index}}
            </div>
            <span>{{item.text}}</span>
        </template>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: '010', text: 'AA' },
                    { id: '011', text: 'BB' },
                    { id: '012', text: 'CC' }
                ]
            }
        })
        // 在vue中修改数组内容不能通过数组下标如vm.list[1]的方式，应用
        // 一.通过数组的7个变异方法如：
        // pop删除最后的、push增加到最后、shift删除第一项、unshift增加到最前、splice截取、sort排序、reverse倒序
        // 如改变第三项内容 vm.list.splice(2,1, {id:'012', text:'LL'})

        // 二.重新改变数组的引用
        // vm.list=[
        //             {id:'020', text:'QQ'},
        //             {id:'021', text:'WW'},
        //             {id:'022', text:'EE'}
        //         ]

        // 三.通过Vue的set方法
        // Vue.set(vm.list, 1, {id:'022', text:'KK'})

        // 四.通过vm的实例方法$set()
        // vm.$set(vm.list, 1, {id:'022', text:'KK'})
    </script>
</body>
</html>