Vue列表渲染v-for的使用案例详解

更新时间：2023年03月29日 11:48:22 作者：小花皮猪

这篇文章主要介绍了Vue列表渲染(v-for的使用),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

列表渲染

列表渲染的东西比较多，我们通过案例一步一步学习列表渲染的相关知识

基本列表

首先写一个基本的列表,想要把persons列表里面的对象展示在li里面，我们可以使用一个指令：v-for

v-for

vue提供给我们做循环的指令，语法类似js的for in遍历

v-for="person in persons"

使用v-for循环数组

列表数据就被循环出来了

上面只是简单使用v-for做一个循环，还有很多小细节，逐一说下

细节问题

上面我们使用v-for做循环的时候，缺少了一个重要的属性，那就是key，那么key的作用是什么呢？

key的使用

关于key的描述，官网是这么说的

key可以理解成一个唯一的标识符，类似于身份证，作为数据的唯一凭证，我们在使用v-for做循环处理的时候，应该是有:key去指定这个唯一标识
虽然不写key也不会报错，也没有任何警告，但是尽量还是按照规范写上

v-for两个参数

上面的案例，只是写了一个参数进行处理，其实v-for是有两个参数的

参数1是循环体的完整对象数据，参数2是索引下标

 <li v-for="a,b in persons" :key="a.id">
                {{a}}-{{b}}
</li>

注意：使用的使用不要少了冒号，是:key，不是key，不然就解析不了表达式了

使用index作为key

既然我们已经知道了，第二个参数是索引，那么我们也可以把第二个参数作为key唯一标识去使用

  <li v-for="person,index in persons" :key="index">
                {{person.name}}-{{person.age}}
 </li>

参数的括号可有可无

参数的括号是可以可有可无的，但是建议加上，不然一些老的脚手架可能会报错

of代替in

v-for可以使用of代替in，作用是一样的，和js简直一模一样

遍历对象

难道v-for只能遍历上面定义的persons数组类型吗，当然不是，也可以遍历对象类型

遍历字符串(用的少)

不仅仅可以遍历数组和对象，还可以遍历字符串

遍历指定次数(用的少)

这种和遍历字符串一样，通常用的不多

总结

v-for指令
1.用于展示列表数据
2 语法 v-for=(item,index) in(of) xxx :key=“yyy”
3 可遍历：数组(用的多)，对象(用的多)，字符串(用的少)，指定次数(用的少)
代码奉上

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
   
    
    <div id="root">
         <!-- 遍历数组 -->
         <h2>人员列表</h2>
       <ul>
            <li v-for="(person,index) of persons" :key="index">
                {{person.name}}-{{person.age}}
            </li>  
       </ul>
        <!-- 遍历对象 -->
        <ul>
            <h2>商品信息</h2>
            <li v-for="(value,key) in shop" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>
         <!-- 遍历字符串 -->
         <ul>
            <h2>遍历字符串</h2>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <ul>
            <h2>遍历指定次数</h2>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
          <!-- 遍历指定次数 -->
          <ul>
            <h2>遍历指定次数</h2>
            <li v-for="(number,index) in 10" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
   const vm=  new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:'18'},
                {id:'002',name:'李四',age:'19'},
                {id:'003',name:'王五',age:'20'}
            ],shop:{
                name:'可乐可乐',
                price:'3.0'
            },
            str:'vue'
           
        }
    
    })
</script>

</html>

到此这篇关于Vue列表渲染(v-for的使用)的文章就介绍到这了,更多相关Vue列表渲染v-for内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue的土著指令和自定义指令实例详解
这篇文章主要介绍了Vue的土著指令和自定义指令的用法讲解 ,需要的朋友可以参考下
2018-02-02
vue3图片剪裁插件vue-img-cutter使用小结
Vue.js是一款流行的JavaScript前端框架,很受用户喜爱,这篇文章主要介绍了vue3图片剪裁插件vue-img-cutter使用小结,本文结合示例代码讲解的非常详细,感兴趣的朋友一起看看吧
2024-01-01
el-form的label和表单自适应填满一行且靠左对齐方式
这篇文章主要介绍了el-form的label和表单自适应填满一行且靠左对齐方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
一个Vue页面的内存泄露分析详解
这篇文章主要介绍了一个Vue页面的内存泄露分析详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue+canvas实现拼图小游戏
这篇文章主要为大家详细介绍了vue+canvas实现拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
el-date-picker默认结束为当前时分秒的操作方法
在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒,查了很多资料写的都不准确 ,今天给大家分享el-date-picker默认结束为当前时分秒的操作方法,感兴趣的朋友一起看看吧
2024-01-01
vue根据进入的路由进行原路返回的方法
今天小编就为大家分享一篇vue根据进入的路由进行原路返回的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
关于element-ui中@selection-change执行两次的问题
这篇文章主要介绍了关于element-ui中@selection-change执行两次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue数据对象length属性未定义问题
这篇文章主要介绍了vue数据对象length属性未定义问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue中实现在外部调用methods的方法(推荐)
下面小编就为大家分享一篇vue中实现在外部调用methods的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02