vue:v-for指令

V-for指令允许你在模板代码中使用for循环。小朋友们，我们一起来看看吧！安静地听我讲哟，我们来看看谁听得最认真，最后就奖励一朵大红花！

首先，我搞一个数组在data里面，里面有四个元素，我希望把他们以列表的形式打印出来，怎么做呢？诶，咱们的v-for循环就派上用场啦！直接一个v-for:"item in arr"就可以了！其中，arr是我们定义在data数据中的数组哦！此时，如果我们还希望在前面显示当前元素是第几个，我们还可以弄个index在前面，为了方便，我们用index+1，这样索引就是从1开始的啦！当然咯，这里的item和index都是要用渲染的方式进行的。

我们还可以展示其他类型的数据，例如，一个类似于python中字典的结构，由键值对组成，键是name,值是对应的大学名称，我们希望把这个也展示出来，那也仍然可以用for in循环的呢！为了展示的美观性，我们进行渲染的内容建议是:item.name哦！当然了，我们还希望可以自由地添加和删除数据，这时，只要在methods里面写两个函数，再绑定到对应的按钮上就可以啦！是不是很简单呢？

下面我们来一起看看代码吧！

<!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>Title</title>
</head>
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item, index) in arr">
                {{ index+1 }}他们是真实存在的:{{ item }}奥特曼
            </li>
        </ul>
        <h2 v-for="item in bestUniversities" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["盖亚", "戴拿", "迪迦", "梦比优斯"],
                bestUniversities:[
                    {name:"MIT"},
                    {name:"Harvard"},
                    {name:"Stanford"},
                    {name:"Princeton"}
                ]
            },
            methods:{
                add:function () {
                    this.bestUniversities.push({name:"Berkeley"});
                },
                remove:function () {
                    this.bestUniversities.shift();
                }
            }
        })
    </script>
</body>
</html>

来看看效果哦！

这就是初始效果哦！

来看看咱们的添加和删除按钮吧！

加一个：

哇！小朋友们看到没，多了一个伯克利哦！

减一个：

哇！MIT没了呢！是不是很神奇呢！

小朋友们努力学习吧！后面还有更神奇的在等着大家哦！

 

 

 

 

 

MIT:你礼貌吗？

 

posted @ 2022-02-14 16:57  EvanTheBoy  阅读(138)  评论(0)    收藏  举报