Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

本文实例讲述了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式。分享给大家供大家参考，具体如下：

定义数据：

<script>
  new Vue({
    el:"#test",
    data:{
      message:"infor",
      list:["a","b","c","d","e"],
      web:{
        "百度":"https://www.baidu.com",
        "搜狐":"https://www.sohu.com",
        "新浪":"https://www.sina.com",
        "淘宝":"https://www.taobao.com"
      }
    }
  })
</script>

html结构：

<div id="test">
    <div>{{ message }}</div>
    <div>{{ list }}</div>
    <div>{{ web }}</div>
</div>

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历</title>
</head>
<body>
  <div id="test">
    <div>{{ message }}</div>
    <div>{{ list }}</div>
    <div>{{ web }}</div>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script>
    new Vue({
      el:"#test",
      data:{
        message:"infor",
        list:["a","b","c","d","e"],
        web:{
          "百度":"https://www.baidu.com",
          "搜狐":"https://www.sohu.com",
          "新浪":"https://www.sina.com",
          "淘宝":"https://www.taobao.com"
        }
      }
    })
  </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun册数，输出结果：

v-for对数组的几种输出方式：

1.只输出value值

html代码：

<div id="test">
    <div v-for = "item in list">{{ item }}</div>
</div>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun册数，输出结果：

2.输出value值且输出对应的索引值

html代码：

<div id="test">
    <div v-for = "(item,index) in list">{{ item }}的索引值是{{ index }}</div>
</div>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun册数，输出结果：

v-for对json格式的几种输出方式

1.只输出value值

html代码：

<div id="test">
    <div v-for = "item in web">{{ item }}</div>
</div>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun册数，输出结果：

2.输出value值和key值

html代码：

<div id="test">
    <div v-for = "(item,key) in web">{{ key }} 的网址是 ： {{ item }}</div>
</div>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun册数，输出结果：

3.输出value值，key值和索引值index

html代码：

<div id="test">
    <div v-for = "(item,key,index) in web">{{ index }}__{{ key }} 的网址是 ： {{ item }}</div>
</div>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun册数，输出结果：

可以看出，在数组里面，小括号里面的参数第一位是value值，第二位是索引值
在json里面，第一位是value值，第二位是key值，第三位是索引值

有的文章里面说$index是数组的内置变量数组下标，$key是json内置变量，可是我没有测出来，且提示有错，不知道这个到底对不对。

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • Vue用v-for给src属性赋值的方法

    我的代码结构如下面代码所示,无法执行,在img中的src属性中无法用mustache表示法 <div id="test"> <div v-for="item in lists"> <img src="{{item.img}}"> </div> </div> new Vue({ el: "#test", data: function () { return { list

  • 对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历 比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

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

  • 浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box

  • 使用vue中的v-for遍历二维数组的方法

    如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-

  • VUE中v-model和v-for指令详解

    VUE中v-model和v-for指令详解

    1.基本雏形 <!DOCTYPE html> <html> <head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue

  • vue.js指令v-for使用及索引获取

    vue.js指令v-for使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

随机推荐