Vuejs——v-for学习

最新推荐文章于 2023-02-09 21:09:07 发布
最新推荐文章于 2023-02-09 21:09:07 发布
阅读量152 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43911280/article/details/104459106
版权

学习中。。。。。。

v-for循环普通数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="(item,i) in list">索引值：{{i}}----每一项{{item}}-</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               list:[1,2,3,4,5,6,7]
           },
           methods:{}
        });
    </script>
</body>

</html>

v-for循环对象数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="(user,item) in list ">id:{{user.id}}------名字：{{user.name}}---索引：{{item}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               list:[
               {id : 1,name:'sz1'},
               {id : 2,name:'sz2'},
               {id : 3,name:'sz3'},
               {id : 4,name:'sz4'},
               
               ]
        
           },
           methods:{}
        });
    </script>
</body>

</html>

v-for循环对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 注意：在遍历对象身上的键值对的时候，除了有va1 key，在第三个位置还有一个索引 -->
        <p v-for="(va1,key,item) in user">值是：{{va1}}-----键是：{{key}} ---索引：{{item}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               user:{
                   id:1,
                   name:'托尼',
                   gender:'男生',
               }
           },
           methods:{}
        });
    </script>
</body>

</html>

v-for迭代数字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- in后面我们放过 普通数组 对象数组，对象，还可以放数字
        注意：如果使用v-for迭代数字的话 前面的count值从1开始 -->
        <p v-for="count in 10">这是第{{count}}次循环</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{

           },
           methods:{}
        });
    </script>
</body>

</html>

v-for循环中key属性的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
      
            <div >
                <label >  Id:
                <input type="text" v-model="id">
                </label>

                <label >  Name:
                    <input type="text" v-model="name">
                    </label>
                   
                      <input type="button" value="添加" @click="add">
                       
            </div>

            <!-- 注意：v-for循环的时候，key属性只能使用number获取string
            注意：key在使用的时候 必须使用v-bind 属性绑定的形式  指定key的值-->
            <p v-for="item in list" :key="item.id">
                <!-- 在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题  必须在使用v-for的同时指定唯一的字符串或数字类型的 key值
                 -->
                <!-- 对象具有唯一性 -->
            <input type="checkbox">{{item.id}}---- {{item.name}}
        </p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               id:'',
               name:'',
               list:[
                   {id:1,name:'帅哥'},
                   {id:2,name:'帅哥'},
                   {id:3,name:'帅哥'},
                   {id:4,name:'帅哥'},
                   {id:5,name:'帅哥'},
               ]
           },
           methods:{
               add(){
                //   this.list.push({id: this.id,name: this.name})
                this.list.unshift({id: this.id,name: this.name})
                  
               }
           }
        });
    </script>
</body>

</html>

未完！！！

just-so-so.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue学习笔记_07】v-for循环遍历
weixin_44752429的博客
11-26 372
【Vue学习笔记_07】v-for循环遍历v-for遍历数组:key属性提高性能响应式的数组方法v-for遍历对象 配套可执行代码示例 => GitHub v-for遍历数组 遍历item 遍历item、index <div id="app"> <!--没有索引值--> <ul> <li v-for="item in names">{{item}}</li> </ul> <!--获取索引值--&g
V-for的使用
sdrfsef的博客
05-10 5万+
目录 v-for遍历数组和对象 1. v-for遍历普通数组 2.v-for遍历对象数组 3.v-for遍历对象 1. v-for遍历普通数组 语法 :v-for="(item,index) in array" item :数组中的每一项 index :索引值 如果只需要第一个参数item ,index可以不写,括号可以省略 <body> <div id="app"> <ul> <!-- in前边只写一个变量,变...
v-for的使用
weixin_43837268的博客
07-10 443
<div class="product-list clearfix" v-for="(item,index) in productTitle" :key="index"> <div class="left-product-title left"> {{item}} </div> ...
v-for的用法
cy199706的博客
02-27 6万+
一、v-for遍历对象 二、v-for遍历数组 三v-for嵌套遍历 <template> <div> <h1>center</h1> <!-- 遍历对象 --> <!-- <div v-for="(value, key, index) in obj" :key="index"> <h1>value {{ value }}</h1> &
有关于v-for的使用
weixin_42569584的博客
05-29 454
ep: v-for="(item,key,index) in arr" v-if=“index >= 1” :key=“item” item ： 值 key ： 键值 index ：索引 上面一段代码表示 循环 从索引1开始循环 arr :key=“item” 加上这段代码vscd 不报错。 ...
详解vuejs之v-for列表渲染
10-19
在本文中，我们将深入探讨`v-for`的用法，并通过实例来展示其工作原理。 首先，我们要了解Vue.js的核心——响应式数据绑定系统。Vue.js会监听数据的变化，并自动更新与之关联的视图。当使用`v-for`指令时，Vue.js会...
详解在Vue.js编写更好的v-for循环的6种技巧
11-20
在VueJS中，v-for循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。 在最基本的用法中，它们的用法如下。 <li v-for='product in products'> {{ product.name }} 但是，在本文中，我将...
Vuejs第十三篇之组件——杂项
11-22
什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。...在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。... 本篇资料是小编参考官方文档的...①组件和v-for 简单来说，就是组件被多次复用； 例
管理系统系列--vuejs Database Manager数据管理系统——前端.zip
最新发布
02-25
Vue.js 的虚拟DOM机制使得页面更新更加高效，同时它的指令系统（如v-if、v-for）简化了DOM操作。 2. **Vuex**： Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用的状态。在数据管理系统中，Vuex 可以帮助组织...
V-FOR用法
晴天Smile
05-09 1429
注意它在数组里的写法
v-for的四种使用方法
qq_39239110的博客
02-20 5万+
v-for的四种使用方法分别是： 1.使用v-for循环一个简单的数组 2.使用v-for循环一个复杂的数组 3.使用v-for循环对象 4.v-for循环一个迭代的数字 &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;!--v-for循环一个简单的数组--&amp;gt; &amp;lt;p v-for=&quot;item in list&q
Vue指令之 v-for的使用
热门推荐
北海之灵的博客
08-11 38万+
1.迭代普通数组 在data中定义普通数组 data:{ list:[1,2,3,4,5,6] } 在html中使用 v-for 指令渲染 &lt;p v-for="(item,i) in list"&gt;--索引值--{{i}} --每一项--{{item}}&lt;/p&gt; 2.迭代对象数组 在data中定义对象数组 data:{ list:[1...
v-for的学习使用
小羽童鞋的技术笔记
09-27 272
{{comic.nam}} .slice(0,3)  只获取数组下标0-3的数据
v-for的四种使用方式
qq_39055970的博客
05-23 2万+
v-for的四种使用方式v-for的四种使用方式1、数组2、在对象数组3、对象4、迭代数字总结 v-for的四种使用方式 1、数组 在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。 （1）先在data中定义数组 arr: [1, 2, 3, 4, 5], （2）在标签中遍历 <p v-for="(item,index) in arr">数值：{{item}}，索引：{{index}}</p> 2、在对象数组 对象数组，其实说到底也是数组，使用方式上和数组一模一
Vue v-for的三种用法
camille009的博客
08-25 2万+
v-for的三种使用方法分别是： 1.使用v-for循环数组 <p v-for="(item,i) in list1" :key="i">索引值：{{i}}：id：{{item.userid}} 姓名：{{item.username}} 2.使用v-for循环对象 <p v-for="(val,key,i) in list2" :key="i">id：{{val}},name:{{key}},index:{{i}}</p> 3.v-for循环一个迭代的数字 <p
v-for 的注意点
qq_37099362的博客
04-03 105
v-for 的key不要直接使用index，可以用数据库里的id进行标识
计算机毕业设计Node.js+Vue野生动物保护网站(程序+源码+LW+部署)
Node.js彤彤程序
02-09 215
管理员登录系统后，可以对首页，个人中心，用户管理，动物分类管理，动物百科管理，知识分类管理，保护知识管理，留言板管理，动物论坛，系统管理等功能进行相应的操作，如图5-6所示。保护知识管理，在保护知识管理页面可以对索引，知识名称，知识分类，视频，封面，发布日期等内容进行详情，修改，查看评论和删除等操作，如图5-10所示。留言板管理，在留言板管理页面可以对索引，用户名，留言内容，留言图片，回复内容，回复图片等内容进行详情，修改，回复和删除等操作，如图5-11所示。推荐HbuilderX;或者 Mac OS；
JS学习笔记（二）
cx0517的博客
10-20 159
一、对象构建对象的两种方式： 对象构造函数 var obj =new object();对象字面量法 var obj={} 对象的属性的访问方式，见图 完成创建后，对象属性可以通过如下两种方式进行赋值和访问： 这两种方法在语义上也是相同的。第二种方法的优点在于属性的名称被看作一个字符串，这就意味着它可以在运行时被计算，缺点在于这样的代码有可能无法在后期被解释器优化。它也可以被用来访问某些以预
前端学习日记-JS数组
Dax1_的博客
08-05 104
数组对象 数组是一种特殊的对象 JS其实没有真正的数组，只是用对象模拟数组 元素的数据类型可以不同 内存不一定是连续的（对象是随机存储的） 不能通过数字下标，而是通过字符串下标 意味着数组可以有任何key 创建一个数组 新建 let arr = [1,2,3] let arr = new Array(1,2,3) let arr = new Array(3) 转化 let arr = ‘1,2,3’.split(’,’) let arr = ‘123’.split(’ ') Array.from
vuejs 页面渲染_详解vuejs之v-for列表渲染
05-16
v-for 是 Vue.js 中最常用的指令之一，用于循环渲染列表数据。下面我们就来详解一下 Vue.js 中的 v-for 指令。 ## v-for 指令 v-for 指令可以循环渲染一个数组或对象的属性，它的语法格式如下： ```html <div v-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值