Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

發(fā)布時間：2020-10-07 00:33:33 來源：腳本之家閱讀：226 作者：Mosowe 欄目：web開發(fā)

本文實例講述了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式。分享給大家供大家參考，具體如下：

定義數(shù)據(jù)：

<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結(jié)構(gòu)：

<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冊數(shù)，輸出結(jié)果：

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

v-for對數(shù)組的幾種輸出方式：

1.只輸出value值

html代碼：

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

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

2.輸出value值且輸出對應(yīng)的索引值

html代碼：

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

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

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冊數(shù)，輸出結(jié)果：

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

2.輸出value值和key值

html代碼：

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

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

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

html代碼：

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

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun冊數(shù)，輸出結(jié)果：

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

可以看出，在數(shù)組里面，小括號里面的參數(shù)第一位是value值，第二位是索引值
在json里面，第一位是value值，第二位是key值，第三位是索引值

有的文章里面說$index是數(shù)組的內(nèi)置變量數(shù)組下標，$key是json內(nèi)置變量，可是我沒有測出來，且提示有錯，不知道這個到底對不對。

希望本文所述對大家vue.js程序設(shè)計有所幫助。

向AI問一下細節(jié)

Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽