Vue学习 02循环创建列表

最新推荐文章于 2022-12-09 10:42:23 发布

月下双鱼

最新推荐文章于 2022-12-09 10:42:23 发布

阅读量975

点赞数

分类专栏： Vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/legend_lv/article/details/108559418

版权

Vue学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
           el:'#app',
           data:{
               message:'你好！',
               movies:['《八佰》','《大话西游》','《贝克街的亡灵》',"《秦时明月》"]
           }
        })
    </script>
</body>

效果

解读：

格式没变，只是要用ul加载 data中的数组

循环谁，就在谁里写循环

这里要循环的是 li，所以在li标签内些循环

<li v-for="item in movies">{{item}}</li>

循环开头 v-for

item就是一个变量相当于 i

in 后跟数据，加载谁？

movies 就是在Vue里定义的数据数组

然后{{ }}内，不能写movies 要写代指的item

其实data里的movies就是模拟的后台数据

如果后台数据增加，Vue就会全部把它加载出来

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

月下双鱼

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习 02循环创建列表

<body> <div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app=new V.
复制链接

扫一扫