Vue.js常用指令之循环使用v-for指令教程

2024-12-01 15:12:17

前言

Vue.js中，v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<div id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</div>

<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   sites: [
    { name: '网推之家' },
    { name: '谷歌' },
    { name: '淘宝' }
   ]
  }
 })
</script>

输出：

模板中使用 v-for：

<div id="wantuizhijia">
 <ul>
  <template v-for="place in places">
   <li>{{ place.name }}</li>
   <li>--------------</li>
  </template>
 </ul>
</div>

<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   places: [
    { name: '厦门' },
    { name: '漳州' },
    { name: '福州' }
   ]
  }
 })
</script>

效果：

v-for 可以通过一个对象的属性来迭代数据：

<div id="wangtuizhijia">
 <ul>
  <li v-for="value in object">
   {{ value }}
  </li>
 </ul>
</div>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '我们',
    url: 'http://www.jb51.net',
    slogan: '美好生活，等待你的开创！'
   }
  }
 })
</script>

效果：

我们

http://www.jb51.net

美好生活，等待你的开创！

v-for 通过一个对象的属性来迭代数据，可以提供第二个的参数为键名：

<div id="wangtuizhijia">
 <ul>
  <li v-for="(value, key) in object">
   {{ key }} : {{ value }}
  </li>

 </ul>
</div>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '我们',
    url: 'http://www.jb51.net',
    slogan: '美好生活，等待你的开创！'
   }
  }
 })
</script>

效果：

name : 我们

url : http://www.jb51.net

slogan : 美好生活，等待你的开创！

v-for 通过一个对象的属性来迭代数据，以第三个参数为索引：

<div id="wangtuizhijia">
 <ul>
  <li v-for="(value, key, index) in object">
   {{ index }} {{ key }}:{{ value }}
  </li>

 </ul>
</div>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '我们',
    url: 'http://www.jb51.net',
    slogan: '美好生活，等待你的开创！'
   }
  }
 })
</script>

效果：

0 name:我们

1 url:http://www.jb51.net

2 slogan:美好生活，等待你的开创！

v-for 也可以循环整数

<div id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: ‘#wangtuizhijia'
})
</script>
</body>

效果：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

关于vue-router的beforeEach无限循环的问题解决

最近在使用vue-router的beforeEach钩子时候遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题代码如下: router.beforeEach((to, from, next) => { if(isLogin){ next() }else{ console.log('测试') next('login') } }) 结果chrome的debug中看到: 这个问题我是这样理解的: router.beforeEach((to, from, next)
浅谈vue.js中v-for循环渲染

这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
VUE中的无限循环代码解析

代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:
vue.js声明式渲染和条件与循环基础知识

vue.js声明式渲染和条件与循环的具体内容,分享给大家绑定 DOM 元素文本值 html代码: <div id="app"> {{ message }} </div> JavaScript代码: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果:Hello Vue! 总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素
Vue.js常用指令的使用小结

1.数据渲染:v-text.v-html.{{}} 1.1 v-text 详细:更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. 实例: <div id="app"> <p v-text="message"></p> </div> <script> new Vue({ el:'#app', data: { message:'Hel
Vue.js如何利用v-for循环生成动态标签

目录前言一.当写入数据为数组时二.当写入数据为对象时三.作用于标签属性和事件总结前言使用v-for可以用于动态生成html标签.其实就是对于vue中属性是对象或者数组进行遍历生成新的标签. v-for就像java中的for循环一样,迭代需要的所有元素. 大多数情况是以一个数组嵌套多个对象的数据进行v-for循环一.当写入数据为数组时如果循环遍历得到的value值是一个对象,需要使用里面的值可以用对象名.key 来调用key对应的value值 v-for写入数组的格式: arr
Vue.js常用指令之循环使用v-for指令教程

前言 Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. v-for 可以绑定数据到数组来渲染一个列表: <div id="wantuizhijia"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <sc
Vue.js常用指令汇总（v-if、v-for等）

有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu
Vue.js每天必学之指令系统与自定义指令

基础除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象.也可以用组件的 directives 选项注册一个局部自定义指令. 钩子函数定义对象可以提供几个钩子函数(都是可选的): •bind:只调用一次,在指令第一次绑定到元素上时调用. •update: 在 bind 之后立即以初始值为参数第一次调用,之后
Vue.js组件间的循环引用方法示例

什么是组件: 众所周知组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展.下面话不多说了,来一起看看本文的正文内容. 引言写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识. 为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件
浅谈Vue.js中如何实现自定义下拉菜单指令

我们利用 Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能.描述如下: 点击按钮,弹出下拉菜单. 点击下拉菜单之外的区域,关闭下拉菜单. 1基础版 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshee
Vue.js学习笔记之常用模板语法详解

本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo
Vue.js学习记录之在元素与template中使用v-if指令实例

本文主要给大家介绍的是关于Vue.js在元素与template中使用v-if指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>&
Vue.js 60分钟轻松入门

.btn-demo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #19b586; text-decoration: none; border: none; border-radius: 4px; color: #fff !important; text-decoration: none !important; cursor: poi

Vue.js常用指令之循环使用v-for指令教程

相关推荐

随机推荐