<vue初体验> 基础知识 2、vue的列表展示
系列导航
一、 效果
利用v-for指令循环展现列表
使用谷歌浏览器动态改变数据展现自动变更
这里的app跟代码中let app = new Vue() 的app对应
二、代码结构
三、代码
02-Vue列表展示.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Vue列表展示</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in books"> {{item}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
books: ['三国演义', '西游记', '水浒传']
}
})
</script>
</body>
</html>
四、代码解释
v-for指令 先学会用后面会详细讲解。
资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
浙公网安备 33010602011771号