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:{

	}

});

Vue 框架-07-循环指令 v-for，和模板的使用的更多相关文章

  1. Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  2. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  3. Vue （表单、斗篷、条件、循环指令，分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数）

    表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  4. Vue框架- 指令操作

    目录 一.Vue指令操作 1. 表单指令 2. 条件指令 3. 循环指令 4. 斗篷指令 5. 实例成员:delimiter分隔符(了解) 6. filter过滤器 7. computed计算属性 8 ...

  5. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  6. Vue框架:挂载点-过滤器-事件指令-表单指令

    近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 |  实例成员 | vue项目 2.drf框架 django的插件,完成前 ...

  7. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  8. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  9. 10.vue框架

    vue框架 易用.灵活.高效 https://cn.vuejs.org/ mvc M model 数据 模型 V view 视图 dom操作 C controller 控制器 路由 C oBtn.on ...

随机推荐

  1. javascript保存excel

    function saveToExcel() { var cind=1; try { var xls = new ActiveXObject ("Excel.Application" ...

  2. 递归、字节流、文件复制_DAY20

    1:递归(理解) (1)方法定义中调用方法本身的现象. (2)递归注意事项: A:要有出口,否则就是死递归. B:次数不能太多,否则内存溢出. 特殊事项:构造方法不能递归定义. 例子:cn.itcas ...

  3. ubuntu 下 重启 mongo 后 遇到蛋疼问题。

    以后,切忌 mongo 正常关闭后 ,再重启ubuntu. 否则后果这是很严重. 2014.8.6日 PM 6点. 网站莫名打不开了,全部是空白,又是老问题. 幸亏 及时发现,那就重启下. 蛋疼,重启 ...

  4. 关于gcc编译器中函数不用进行原型声明的解释

    经过大量实验和参考网上的说法得出一个结论: gcc编译器中,函数可以不用提前进行原型声明,编译器会把函数调用同时认为是声明.需要注意的是,由于函数调用的时候并没有写明函数返回值,这是gcc把调用当成声 ...

  5. [经典]网关,DNS,DHCP三者关系详解

    什么叫网关的精解 Sample Text转自(协议分析论坛)计算机主机网关的作用是什么?假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大爷就是你的 ...

  6. 糗事之 -- 用ssh公钥实现免密码登录

    前言:工作原因,每天都会登录好多次服务器,每次都是ssh root@192.168..... 然后输入密码,来来回回输几次真是很烦啊. 问题:怎么可以在每次ssh连接服务器时不用输入密码,直接登录? ...

  7. Python使用Redis数据库

    Redis 简介 Redis是开源的高性能Key-Value数据库,可以用于缓存等用途. Redis可以提供事务和持久化支持保证并发安全性,并提供TTL(time to life)服务. 使用Redi ...

  8. Linux系统资源管理 之 硬件信息

    1. CPU lscpu : 一般不加参数,直接使用该命令. cat /proc/cpuinfo: 该文件中列出了CPU的详细信息,类似于'lscpu'命令 lscpu [niesh @niesh D ...

  9. [日常] mysql的索引使用情况测试

    1.索引(Index)是帮助MySQL高效获取数据的数据结构,可以理解为“排好序的快速查找数据结构”,在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据, ...

  10. iOS 交互h5 - WKWebView

    众所周知,UIWebView存在内存问题,也就是当加载一个UIWebView时,内存会一直上升趋势无法得到释放.这样在使用UIWebView进行h5交互开发时会有很大的问题. 因而苹果增加了一个新的类 ...