vue指令_v-for / 遍历

vue指令-v-for

  • 语法

    • v-for="(值, 索引) in 目标结构"
    • v-for=“值 in 目标结构”
  • 目标结构:

    • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
  • 注意:

    v-for的临时变量名不能用到v-for范围外

例:

<template>
<!-- v-for="值变量,索引变量  in  目标结构" -->
<!-- v-for="值变量  in  目标结构" -->
<!-- 可以遍历数组 / 对象 / 数字 / 字符串(可遍历结构) -->
  <div>
      <h2>数组</h2>
     <ul>
         <!-- v-for  要循环生成谁就写在谁身上 -->
        <li v-for="(item,index) in arr" :key="index">
            {{index}}
            ---
            {{item}}
        </li>
     </ul>
     <h2>复杂一点的结构</h2>
     <ul>
         <!-- :key  暂时把它理解为一个可提高 v-for 渲染效率的属性配置 , 一般写成 item.id-->
         <li v-for="item in res.data " :key="item.id">
             {{item.name}}
             ---
             {{item.id}}
         </li>
     </ul> 
     <h2>对象(了解)</h2>
     <ul>
         <li v-for="(val,key) in friend" :key="key">
             {{key}}
             ---
             {{val}}

         </li>
     </ul>
     <h2>可以遍历固定的数字/固定的字符串</h2>
     <ul>
         <li v-for="number in 8" :key="number">
             {{number}}
            

         </li>
     </ul>
     <ul>
         <li v-for="hh in '萨瓦迪卡'" :key="hh">
             {{hh}}
            

         </li>
     </ul>
  </div>
</template>

<script>
export default {
data () {
    return {
        // 准备数组
        arr:["一闪一闪","亮晶晶","满天都是","小星星"],
        // 在复杂一点的结构
        res:{
            code:200,
            msg:"请求成功",
            data:[
                {
                    id:1,
                    name:'艾欧尼亚',
                },
                {
                    id:2,
                    name:'德玛西亚',
                },
                {
                    id:3,
                    name:'诺克萨斯',
                },
                {
                    id:4,
                    name:'战争学院',
                },
                {
                    id:5,
                    name:'祖安',
                },
            ]
        },
        // 遍历对象(了解)
        friend:{
            name:'如花',
            age:'18',
            sex:'未知',

        }

    }
}
}
</script>

<style>

</style>

总结: vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值