vue提供了v-for指令来遍历元素
text 代码:<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ol>
<li v-for="movie in movies">{{movie}}</li>
</ol>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const test = new Vue({
el:"#app",
data:{
movies:['星际传奇','星际穿越','复仇者联盟','环太平洋']
}
})
</script>
</body>
这里我们要将电影名称在列表中展示,先在data中用数组保存电影名称。
语法:v-for="自定义变量 in 要遍历的元素"
我们要将每个电影放在一个li中,只需要在一个li中使用v-for指令,vue会根据movies的长度来创建对应数量的li
运行结果
1.星际传奇
2.星际穿越
3.复仇者联盟
4.环太平洋