原创

Vue 框架-07-循环指令 v-for,和模板的使用

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://icode.blog.csdn.net/article/details/84064773

Vue 框架-07-循环指令 v-for,和模板的使用

本章主要是写一些小实例,记录代码,想要更详细的话,请查看

官方文档:https://cn.vuejs.org/v2/guide/#条件与循环

第一个小实例:
使用 v-for 遍历 js 文件中定义的数组

在这里插入图片描述

源代码 html 文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VueLearn-cnblogs/xpwi</title>
		<!--引入自定义的样式-->
		<link rel="stylesheet" href="css/style.css" />
		<!--引入 vue 核心 js-->
		<script type="text/javascript" src="js/vue.js" ></script>
		
	</head>
	<body>
		
		<!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
		<div id="vue-app">
			
			<h2> v-for </h2>
			
			<!--1.数组下标直接获取
			{{nameList[1]}}-->
			
			<!--2.使用 v-for 遍历-->
			<ul>
				<li v-for="i in nameList">{{i}}</li>
			</ul>
			
			<!--3.拿 json 数据-->
			<ul>
				<li v-for="i in users">{{i.name}}-{{i.age}}</li>
			</ul>
			
		</div>
		
		<!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
		<script type="text/javascript" src="js/vfor.js" ></script>
	</body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
	//注意代码格式
	
	//el:element 需要获取的元素,一定是 html 中的根容器元素
	el:"#vue-app",
	data:{
		//下面数组的元素是 json 对象,用于前台 for遍历
		nameList:["Bob","Alice","Eve"],
		users:[
			{name:"刘备",age:30},
			{name:"关羽",age:25},
			{name:"张飞",age:28}
		]

	},
	methods:{
	}
});

第二个小实例:

加上下标,上面代码中用 i 表示数组中的元素,也可以第二个参数来表示下标
在这里插入图片描述
源代码 html 文件:

<ul>
			<li v-for="(i,n) in users">第{{n}}名:{{i.name}}-{{i.age}}</li>
</ul>

第三个小实例:模板使用

v-for 上面是用在 li 标签,在 Vue 中使用更多的是在 template 标签中使用。

v-for 很多时候,比如说,拿到数据仓库里很多数据。我们遍历拿到里面的内容,并不是只在一个标签内应用,这时就要使用到 template 。

template 是 Vue 提供的一个标签,是一个模板,可以理解成一个 html 的代码块。用来存放多个 html 元素。

在页面 DOM 中 会显示 template 标签中的内容,但是 template 标签本身不会在 HTML DOM 中出现,只是起到一个模板的作用,下面来看实例:

源代码 html 文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VueLearn-cnblogs/xpwi</title>
		<!--引入自定义的样式-->
		<link rel="stylesheet" href="css/style.css" />
		<!--引入 vue 核心 js-->
		<script type="text/javascript" src="js/vue.js" ></script>
		
	</head>
	<body>
		
		<!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
		<div id="vue-app">
			
			<h2> v-for </h2>
			
			<!--1.数组下标直接获取
			{{nameList[1]}}-->
			
			<!--2.使用 v-for 遍历-->
			<!--<ul>
				<li v-for="i in nameList">{{i}}</li>
			</ul>-->
			
			<!--3.拿 json 数据-->
			<!--<ul>
				<li v-for="(i,n) in users">第{{n}}名:{{i.name}}-{{i.age}}</li>
			</ul>-->
			
			<!--4.template-->
			<template v-for="(i,n) in users">
				<h3>获奖者:{{n+1}}</h3>
				<p>{{i.name}}</p>
				<span>他的年龄是{{i.age}}</span>
			</template>
			
		</div>
		
		<!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
		<script type="text/javascript" src="js/vfor.js" ></script>
	</body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
	//注意代码格式
	
	//el:element 需要获取的元素,一定是 html 中的根容器元素
	el:"#vue-app",
	data:{
		//下面数组的元素是 json 对象,用于前台 for遍历
		nameList:["Bob","Alice","Eve"],
		users:[
			{name:"刘备",age:30},
			{name:"关羽",age:25},
			{name:"张飞",age:28}
		]

	},
	methods:{
	
	}

});

更多文章:

文章最后发布于: 2018-11-14 13:09:51
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览