Vue的学习(三)Vue展示出一个列表,也是入门的一个小案例

2020-11-24 11:42:49 浏览数 (1)

之前的那个案例只是在页面展示了一个消息。现在要展示一个列表

代码语言:javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<ul>
				<li v-for="item in movies">{{item}}</li>
			</ul>
			
		</div>
		<script src="../js/vue.min.js"></script>
		
		<script>
			// 创建vue的对象,将对象赋值给常量,以const定义常量.创建对象里面要传入参数
			const app = new Vue({
				el: '#app',   // 用于挂载需要管理的元素,我们自己创建了一个div,现在就要用vue管理我们创建的div.用el这个属性 和div产生联系
				data: {  //这个属性里面就是定义数据,里面是以键值对的形式  进行创建数据,之后我们就可以在div里面拿到这个里面的数据
					movies: ['电影1','电影2','电影3']
				}	
			})
			
		</script>
	</body>
</html>

0 人点赞