[Vue] 10.Vue的列表循环渲染 v-for

最新推荐文章于 2024-10-10 12:52:35 发布

weiweicn!

最新推荐文章于 2024-10-10 12:52:35 发布

阅读量767

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u014627255/article/details/125047293

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

使用v-for渲染list中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    listArray: ['xiaoming', 'li', 'doctor']
                }
            },
            template: `
                <div>
                    <div v-for="item in listArray">{{item}}</div>
                </div>

                `,
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
2. 获取循环中的index：循环的每一项尽量给一个唯一的key值，这样相同的值不需要多次渲染，提高性能

<script>
        const app = Vue.createApp({
            data() {
                return {
                    listArray: ['xiaoming', 'li', 'doctor']
                }
            },
            template: `
                <div>
                    <div v-for="(item, index) in listArray" :key="index">{{item}} -- {{index}}</div>
                </div>

                `,
        });
        const vm = app.mount('#root')
    </script>

在这里插入图片描述
3. 循环对象：打印出value和key

<script>
        const app = Vue.createApp({
            data() {
                return {
                    listArray: ['xiaoming', 'li', 'doctor'],
                    listObj: {
                        firstName: 'xiaoming',
                        lastName: 'li',
                        job: 'doctor'
                    }
                }
            },
            template: `
                <div>
                    <div v-for="(value, key, index) in listObj">{{value}} -- {{key}} -- {{index}}</div>
                </div>
                `,
        });
        const vm = app.mount('#root')
    </script>

在这里插入图片描述
4. 向数组中添加数据：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    listArray: ['xiaoming', 'li', 'doctor'],
                    listObj: {
                        firstName: 'xiaoming',
                        lastName: 'li',
                        job: 'doctor'
                    }
                }
            },
            methods: {
                handleAddBtnClick() {
                    this.listArray.push('hello')
                }
            },
            template: `
                <div>
                    <div v-for="(item, index) in listArray" :key="index">{{item}} -- {{index}}</div>
                </div>
                <button @click="handleAddBtnClick">新增</button>
                `,
        });
        const vm = app.mount('#root')
    </script>

像对象里添加字段，然后显示

<script>
        const app = Vue.createApp({
            data() {
                return {
                    listArray: ['xiaoming', 'li', 'doctor'],
                    listObj: {
                        firstName: 'xiaoming',
                        lastName: 'li',
                        job: 'doctor'
                    }
                } 
            },
            methods: {
                handleAddBtnClick() {
                    // this.listArray.push('hello')
                    this.listObj.age = 100;
                    this.listObj.sex = 'male';
                }
            },
            template: `
                <div>
                    <div v-for="(value, key, index) in listObj" :key="index">{{value}} -- {{key}}</div>
                </div>
                <button @click="handleAddBtnClick">新增</button>
                `,
        });
        const vm = app.mount('#root')
    </script>