vue_使用v-for遍歷對(duì)象屬性

vue_使用v-for遍歷對(duì)象屬性

語(yǔ)法格式

(value,key,index) in user

其中: key,和index是可選參數(shù)。

代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入最新的vue穩(wěn)定版本-->
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>


  <!--使用v-for遍歷對(duì)象屬性-->
  <div id="app">
      <ul>
          <li v-for="(value,key,index) in user"> 角標(biāo):{{index}}------ 鍵名: {{key}} ------ 值:{{value}} </li>
      </ul>
  </div>

<script>
    var  vue=new Vue({
        el:'#app',
        data:{
            user:{
                name: 'SkyManss',
                gender: '男',
                age: 26
            }
        }
    });
</script>
</body>
</html>

運(yùn)行結(jié)果:

v-for遍歷對(duì)象屬性
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,180評(píng)論 0 29
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,373評(píng)論 0 6
  • 目錄 1.前期概要與基礎(chǔ)2.模板語(yǔ)法3.計(jì)算屬性與偵聽器 一、概要 Vue.js 使用了基于 HTML 的模板語(yǔ)法...
    唯老閱讀 2,873評(píng)論 1 4
  • Lua 5.1 參考手冊(cè) by Roberto Ierusalimschy, Luiz Henrique de F...
    蘇黎九歌閱讀 14,258評(píng)論 0 38
  • 主要還是自己看的,所有內(nèi)容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/,類似于 vie...
    Leonzai閱讀 3,540評(píng)論 0 25

友情鏈接更多精彩內(nèi)容