本地应用 v-for 指令

◆v-for指令的作用是:根据数据生成列表结构
◆数组经常和v-for结合使用
◆语法是( item,index) in数据
◆item和index可以结合其他指令一起使用
◆数组长度的更新会同步到页面上，是响应式的

结果：

1，初始化：

2，点击添加数据：

3，点击移除数据：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V-for指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li v-for="(it, index) in arr">
            {{index+1}} 测试数据 {{it}}
        </li>
    </ul>
    <h3 v-for="(item,index) in eat" v-bind:title="index+1">
        全部：{{item}}<br>
        获取键值对中的值：{{eat[index]}}<br>
        获取键值对中的值：{{item}}<br>
    </h3>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{
                    arr:["北京","上海","广州","深圳"],
                    eat:[
                        {name1:"麻辣香锅"},
                        {name2:"王婆大虾"},
                        {name3:"纸包鱼"}
                        ]
                },
                methods:{
                    add:function(){
                        this.eat.push({name1:"一样一样"})
                    },
                    remove:function(){
                        this.eat.shift();
                    }
                }
            }
        )
    </script>
</body>
</html>

dream_uping

原创文章 643 获赞 1975 访问量 129万+

关注他的留言板

本地应用 v-for 指令

结果：

猜你喜欢