vue之v-for基本使用

最新推荐文章于 2023-07-11 18:05:49 发布
最新推荐文章于 2023-07-11 18:05:49 发布
阅读量335 收藏
点赞数
分类专栏： Vue 文章标签： vue之v-for基本使用 v-for vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41684621/article/details/113799396
版权

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{ index+1 }}一线城市：{{ item }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            arr:["北京","上海","广州","深圳"],
            vegetables:[
                {name:"青菜"},
                {name:"胡萝卜"}
            ]
            },
            methods: {
                add:function () {
                    this.vegetables.push({name:"番茄炒鸡蛋"})
                },
                remove:function () {
                    this.vegetables.shift();
                }
            }
        })
    </script>
</body>

  • 效果：
    在这里插入图片描述

  • 加上的 v-bind:title="item.name，当鼠标悬停在内容上，就会显示对应的title内容

  • 当点击 添加数据 按钮时，就会添加push一个番茄炒鸡蛋，
    在这里插入图片描述

  • 当点击 移除数据 按钮时，就会从上面减少一个内容
    在这里插入图片描述

兮动人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
VUE中v-model和v-for指令详解
12-07
1.基本雏形 <!DOCTYPE html> <html> <head> <title></title> [removed][removed] [removed] [removed] = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello Vue!' } }); } </sc
带你详细了解Vue中的v-for
sky89299的博客
04-11 1万+
## v-for 0. 作用： 列表渲染，所在标签结构，按照数据数量，循环生成。指令写在谁身上，就循环创建谁 0. 语法： `v-for = "(值变量，索引变量) in 目标结构" ：key = 索引变量` `v-for = "值变量 in 目标结构 ：key = 索引变量"` 目标结构：可以是数组，对象，字符串 0. 数组方法如果修改了原数据就会更新 页面，如果没有修改，则不会，但可以重新赋值给变量让你页面更新 0. v-for中的key作用：在更新的时候
Vue v-for详细使用
热门推荐
技术前端，忠于热爱 @0.活在风浪里
12-06 4万+
目录 定义vue数据❤ vue循环数组❤❤❤❤ vue循环对象❤❤❤❤ 效果❤ 四种创建对象的方法：❤❤❤ 两种创建数组的方法：❤❤❤ 对象的两种取值方式：❤❤❤❤ 数组扁平化❤❤ 声明函数的6种方式 for in 遍历对象的key 和 value❤❤❤ for of 遍历对象的key 和 值（value）❤❤❤ for in / for of 遍历数组 定义vue数据❤ data: { //数组 ...
vue v-for详解
coinisi_li的博客
01-10 5106
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候，必须在使用v-for的同时指定唯一的字符或者number类型：key值。假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前，diff算法默认是将c更新成f，d更新成c，e更新成d，最后再插入e。key在使用时只能使用v-bind的属性绑定的形式，指定key的值。为何要添加一个key属性？
Vue之v-for（包含key内部原理讲解）
浩泽学编程的博客
07-11 3154
v-for：列表渲染key的作用主要是为了高效的更新虛拟DOM，其原理是vue在patch（补丁）过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。另外，若不设置key还可能在列表更新时引发一些隐蔽的bug。如某行数据不该更新的却更新了。vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
vue中的v-for循环
PCthedream的博客
09-21 3万+
1.v-for遍历普通数组1.v-for遍历普通数组in前面如果是一个变量，那么该变量保存的是数组中的数据in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标。
详解在Vue.js编写更好的v-for循环的6种技巧
11-20
在VueJS中，v-for循环是每个项目都会使用的东西...首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性，它可以确保组件以您期望的方式工作。 果我们不
vue2.0 可折叠列表 v-for循环展示的实例
12-29
先上一张效果图： ...折叠列表单独做一个组件，图标是用的iconfont中生成的css链接：myMusicSheetList.vue <div class=sheet-list> <div class=sheet-header click=toggleSheet> <i class=icon iconfont ic
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
12-09
v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1：v-if指令 v-if指令是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下： v-if="expression" expression是一个返回布尔值的表达式，...
深入浅析Vue.js 中的 v-for 列表渲染指令
12-29
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用，类似 item in items 的形式。 1.1 遍历数组 html： <li v-for=n>{{n.title}} ...
vue中 v-for循环的用法详解
10-15
主要介绍了vue中 v-for循环的用法详解,本文通过实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue v-for的使用案例：课程表
08-05
使用v-for循环展示表格数据，主要是解决平常表格中内容同与不同的问题，显示出与excel展示内容相似的效果。
VUE语法：v-for指令的四种用法
qq_42586648的博客
07-25 2万+
最近在学习VUE，目前酸菜鱼也才刚开始几天，或许是没天赋之前接触框架也很浅显，很多稍难地方学习的不通透，简单的反倒一过就忘记了。于是想要把简单基础逐步简单梳理一遍，以防万一自己连基础的都学不到，分享给大家共同总结学习。 v-for的四种应用方式: 方式一：v-for循环普通数组 //土蛋方法： <p>{{list[0]}}</p> <p>{{list[1...
Vue指令篇_v-for_列表渲染
桃花扇的博客
08-01 2706
今天要写的是Vue很香的一个指令v-for，这个指令在结构中实现循环，基于数据多次渲染元素，在减少代码量的情况下，又使得逻辑关系一目了然，很奈斯。不多说啦，就开始吧。 目录 1.使用方法 1）v-for中使用数组 2）v-for中使用对象 3）v-for中适用数字 4）v-for中使用字符串 2. key 1.使用方法 v-for指令中可以使用数组、对象、数字、以及字符串，下面我们一一举例，首先把vue.js文件引进来 <script src="https://cdn.jsdel
VUE指令(3)——v-for
小生不才的博客
11-01 3663
遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现 1.遍历数组 语法：v-for=“item in items” items：要遍历的数组，需要在 vue 的 data 中定义好 item：迭代得到的当前正在遍历的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
Vue列表渲染(v-for的使用)
见证自己学习,成长的记录
03-28 2632
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 v-for循环的用法
beidaol的专栏
01-06 3075
v-for的in后面可以放普通数组、对象数组、对象和数字 v-for循环的时候，key属性只能使用number或String。 key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。 在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。 1、v-for循环普通数组 ①...
Vue指令之v-for的使用
m0_62404884的博客
06-05 4721
目录1.v-for循环普通数组2.v-for循环对象数组3.v-for循环对象中的属性 4.v-for循环数字 v-for="(item,i) in list"示例：在vue实例的data中增加一个数组循环数据结果v-for="(item,i) in userList"示例在vue实例的data中增加一个数组循环数组对象结果v-for="(val,key,i) in userList[0]"示例结果注意： 在遍历对象身上的键值对时，除了有 val key 键值对，在第三个位置还有一个索引v-for=“i i
vue的v-for如何使用
最新发布
08-23
Vue 的 v-for 指令用于在 Vue 实例中循环渲染一组元素或数据列表。它的基本语法如下： ```html <div v-for="item in items" :key="item.id"> {{ item.name }} </div> ``` 在这个示例中，我们使用 v-for 指令来遍历一个名为 items 的数组，并将每个数组项渲染为一个 div 元素。:key 属性是必需的，它用于提供每个循环项的唯一标识，以便 Vue 可以在更新 DOM 时进行高效追踪。 你还可以使用 v-for 来遍历对象的属性： ```html <div v-for="(value, key) in object" :key="key"> {{ key }}: {{ value }} </div> ``` 在这个示例中，我们使用 v-for 来遍历一个名为 object 的对象，并将每个属性的键值对渲染为一个 div 元素。 除了基本的循环遍历，v-for 还提供了一些其他的用法，例如指定索引、迭代器和范围等。你可以参考 Vue 的官方文档来了＊＊＊

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

兮动人

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

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

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

打赏作者

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

抵扣说明：

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

余额充值