vue菜鸟学习日记9---v-for

豆沙沙包?

于 2021-07-27 18:17:19 发布

阅读量156

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zsysingapore/article/details/119150176

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-for:根据数据生成列表结构
数组经常和v-for结合使用
语法是（item,index)in 数据
item和index可以结合其它指令一起使用
demo

<!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>Document</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 fruits" 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:["北京","上海","广州","深圳"],
                fruits:[
                    {name:"车厘子"},
                    {name:"榴莲"}
                ]
            },
            methods:{
                add:function(){
                    this.fruits.push({name:"车厘子"});
                },
                remove:function(){
                    this.fruits.shift();
                }
            }
        })
    </script>
    
</body>
</html>

豆沙沙包?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue菜鸟学习日记9---v-for

v-for:根据数据生成列表结构数组经常和v-for结合使用语法是（item,index)in 数据item和index可以结合其它指令一起使用demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name.
复制链接

扫一扫

专栏目录