04. [初识]Vue3循环和数据双向绑定

游客2025-05-16 03:23:01

网站制作 > 建站教程
> 正文

编写 Vue3 的基本结构
声明佳丽数组并循环出来
动态增加佳丽
总结

本文通过完成大宝剑城展示佳丽列表的需求，学习一下在Vue3.x中如何进行循环展示和双向数据绑定。如果你想严肃点学习，可以把它看作是一个 TodoList 的小功能，形式不同，知识不变。

编写 Vue3 的基本结构

在项目根目录，新建一个文件Demo4.html，然后把Demo1.html的代码全部复制过来，修改下面代码的样子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佳丽列表</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>

</html>

声明佳丽数组并循环出来

我们反复强调小伙伴们的编程思想要从面向 DOM，转变成面向数据的编程。这时候我们就需要一个数据佳丽列表。在createrApp()方法里增加一个data()方法，声明list[]数组。

data() {
    return {
        list: ['1-小红','2-小影','3-小丽']
    }
},

有了数组，需要在模板中循环出来。这个需要用到v-for指令.

template: `
    <ul>
        <li v-for="item of list">{{item}}</li>
    </ul>
`

这句代码的意思是，我要进行循环，循环的数据是list,list中的每一项我会放到 item 中，然后使用字面量在模板中进行展示就可以了。

v-for指令还有一个索引值，可以如下写法，打印出索引值。

<li v-for="(item,index) of list">[{{index}}]{{item}}</li>

会了循环之后，我们就可以根据前面的知识，做一个动态的可交互的佳丽列表了。

动态增加佳丽

先来做一个简单的效果，就是点击按钮后，就增加一个佳丽到列表中。先去掉数组中的值，然后来写一个按钮，按钮绑定handleAddItem事件。代码如下：

<script>
    Vue.createApp({
        data() {
            return {
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push("佳丽")
            }
        },
        template: `
            <div>
                <button v-on:click="handleAddItem">增加佳丽</button>
                <ul>
                    <li v-for="(item,index) of list">[{{index}}]{{item}}</li>
                </ul>
            </div>
        `
    }).mount("#app")
</script>

04. [初识]Vue3循环和数据双向绑定 1