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. Python 1行代码实现文本分类(实战笔记),含代码详细说明及运行结果

    Python 1行代码实现文本分类(实战笔记),含代码详细说明及运行结果 一.详细说明及代码 tc.py =============================================== ...

  2. 快捷键&小技巧

    shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...

  3. EJB3 EntityBean中EntityManager的管理类型

    EJB中EntityManager的管理方式有两种:Container-managed EntityManager和Application-managed EntityManager 即容器管理的En ...

  4. 再学Java 之 foreach循环

    从Java 5 之后,Java提供了一种新的循环:foreach循环,这种循环遍历数组和集合更加简洁. foreach循环语法格式如下: for ( type variableName : array ...

  5. Python -- 网络编程 -- Socket发送文件

    客户端如果直接send两次,一次发文件名,一次发文件内容 服务端接受的时候会一起接收,不知怎么分开发送,或者分开接收, 或者全部接收再解析内容 今天发现传送mp3文件的时候没问题,传送文本文件的话,以 ...

  6. web前端之JavaScript

    JavaScript概述 JavaScript历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司.由于网景公司希望能在静态HTML ...

  7. 【Express系列】第4篇——使用session

    session 在 web 应用中使用很普遍,不过在 node 上面,要用 session 还真得折腾一番才行. 从加入中间件,到 session 的写入.清除,当时是遇到了不少坑的. 当然也可能是我 ...

  8. Mycat常见错误

    Mycat常见错误 1.  问题: schema myinvoice didn't config tables,so you must set dataNode property! 解决:在schem ...

  9. ABP实战--分页排序

    待完成... public async Task<DatatablesResultDto<TaskDto>> GetList(KeywordDatatablesRequestD ...

  10. textarea的placeholder属性内容折行显示(PC和移动端端)

    1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...