V-for遍历

这篇具有很好参考价值的文章主要介绍了V-for遍历。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

遍历数组

 v-for最常用的可能就是用来遍历数组,接受两个参数(item, index),item为遍历出的每组数据,index为每组数据的索引,可做唯一标识

    <div id="app">
 <ul>
    <!-- 1.在遍历的过程中,没有使用下标值(索引值) -->
    <!-- item是数组中的每一项,没有使用下标值(索引值) -->
    <li v-for="(item,index) in list">{{index}}-{{item}}</li>
 </ul>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
new Vue({
    el:'#app',
    data:{
        list:['刘备','关羽','张飞','赵云','黄总']
    }
})
    </script>
</body>
</html>

效果图:

V-for遍历

  遍历对象

   v-for遍历对象可接受三个参数(value, key, index),value为每个对象的value值,key为key值,index为索引

 let vue = new Vue({
      el: "#app",
      data: {
        list: [
          { id: 1, name: "张狗", age: 88 },
          { id: 2, name: "舔狗", age: 20 },
          { id: 3, name: "藏獒", age: 10 },
          { id: 4, name: '狼狗', age: 18 }
        ],
       }

效果图:

V-for遍历

遍历数字

<body>
    <div id="app">
        <!-- 遍历数字(指定次数的循环) -->
        <h2>以下是指定次数</h2>
        <ul>
            <!-- num是1到10 -->
            <li v-for="num in 10">{{num}}</li>
    
        </ul>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
new Vue({
    el:'#app'
    })
    </script>
</body>
</html>

效果图:

V-for遍历

 文章来源地址https://www.toymoban.com/news/detail-507593.html

给 v-for 加 key属性

使用v-for 的时候,给对应的元素或组件添加上一个:key 属性,为了更好地复用,但是要保证这个 key 的值是唯一的

<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'小明'})">添加</button>
        <ul>
            <li v-for="item in list":key="item.id">
                <input type="checkbox" >
                <span>{{item.name}}</span>
            </li>
    
        </ul>
    </div>
  

    <script src="../Vue/vue.js"></script>
    <script>
new Vue({
    el:'#app',
    data:{
        list:[
            {id:1,name:'小红'},
            {id:2,name:'小张'}, 
            {id:3,name:'小黑'}
        ]
    }
    })
    </script>
</body>
</html>

效果图:

V-for遍历

 

到了这里,关于V-for遍历的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antd vue中遍历v-for中控制每个按钮的loading

            项目中遇到一个需求,需要根据后台返回数据,遍历生成多个按钮,并点击出发事件。点击事件的时候需要该按钮loading状态。实现方法如下:

    2024年02月14日
    浏览(34)
  • vue3 v-for遍历defineProps或者props接收的数据时,报“xx” is of type ‘unknown‘

    vue中使用ts,且在使用props或者defineProps进行父传子时,v-for遍历收到的数组,进行取值时,报“xx” is of type \\\'unknown\\\' 提示:ts进行类型推导造成的报错 提示:使用接口进行 提示:创建一个ts文件,放类型数据,在使用的页面进行引用            总结:前两个都有一个弊端,

    2024年02月16日
    浏览(46)
  • 使用 v-for 指令和数组来实现在 Uni-app 中动态增减表单项并渲染多个数据

    在 data 中定义一个数组,用于存储表单项的数据: 在模板中使用 v-for 指令渲染表单项: 在 methods 中定义添加和删除表单项的方法: 这样,每点击一次 “添加表单项” 按钮,就会新增一个表单项,并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除”

    2024年02月10日
    浏览(37)
  • Vue中v-if与v-for同时使用的影响和JavaScript中含对象的数组去重

    响应性和性能: v-for 指令会根据数组的每个元素创建和销毁对应的DOM元素,而 v-if 指令会根据条件来插入或移除元素。当 v-if 和 v-for 同时应用于同一个元素时,可能会影响Vue的响应性和性能。 循环内条件:当在 v-for 循环内使用 v-if 条件时,条件将针对每个循环项进行评估。

    2024年02月11日
    浏览(42)
  • vue中的v-for循环

    如果是一个变量,那么保存的是对象中的属性值 如果是两个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名 如果是三个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名,第三个变量保存的是下标 v-for=\\\"o1 in obj\\\"          o1:属性值 v-f

    2024年01月17日
    浏览(39)
  • uniapp列表实现方式 v-for

    v-for=“对象item in 数组” v-for=“(对象item,下标) in 数组” v-for=“(对象item,使用这个键取到的值,下标) in 数组” :key 绑定标识 一般建议使用对象中的id等值 类型 any

    2024年01月18日
    浏览(37)
  • Vue 常用指令 v-for 列表循环

    v-for:根据数据生成列表结构,并且是响应式的,可以十分便捷的操作列表结构了。 至于是什么样的列表,就看你指令使用的位置了, 列表的生成依赖于数据,所以先去定义数据。 它结合的类型挺多的,数组,对象,迭代器,字符串,最常使用的是数组。这里使用数组来演

    2024年02月14日
    浏览(38)
  • Vue3 v-for点击切换样式

    在div上绑定   :class= { 名称(class/id):a === key 值 }   并 添加 一个 点击事件 声明 const  a  = ref(0) ;  css写我们要的样式(就是我们绑定的class名称) 点击事件里写    i.value = key 值

    2024年02月13日
    浏览(44)
  • Vue中v-for的9种使用案例

            以下代码的意思是:循环渲染一个包含三个元素的列表,每个元素的值分别为“第一项”、“第二项”和“第三项”。         以下代码的意思是:循环渲染一个包含三个属性的对象,每个属性的键值对分别为“name: 张三”、“age: 18”和“gender: 男”。    

    2024年02月03日
    浏览(38)
  • element-ui v-for循环表格

    再某种情况下我们会有这样一个需求 一个页面有多个弹窗表格 但是又不能重复写多个表格 写多个会显得我们的代码难以维护 以下我封装了一个表格 上代码: 样式什么的可以忽略 直接cv即刻使用 主要靠父亲传一个数组来控制表头显示什么以及他的值 样式用不到可以删除 效

    2024年02月12日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包