07. v-for指令使用

最新推荐文章于 2023-01-18 16:47:44 发布
最新推荐文章于 2023-01-18 16:47:44 发布
阅读量207 收藏
点赞数
分类专栏： Vue掠影 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40477107/article/details/115295002
版权

v-for指令使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    1.导入开发版本的Vue.js
    2.创建Vue实例对象，设置el属性和data属性
    3.使用模板语法将数据渲染到页面上
 -->

<body>
    <div id="app">
        <!-- 利用v-for展示普通数组 -->
        <ul>
            <!-- 利用v-for指令循环生成标签 -->
            <li v-for="item in campus">
                校区：{{item}}
            </li>
        </ul>

        <ul>
            <!-- 还可以使用索引,，注意语法格式，括号里第一个元素表示数组元素，第二个参数表示数组索引-->
            <li v-for="(item,index) in campus">
                {{index+1}}校区：{{item}}
            </li>
        </ul>
        <!--------------分割线----------------->
        <button @click="add">增加菜品</button>
        <button @click="remove">删除菜品</button>

        <!-- 利用v-for展示对象数组 -->
        <h4 v-for=" item in vegetable">{{item.name}}</h4>

    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                campus: ["北京校区", "上海校区", "上海校区"],
                vegetable: [{
                    name: '西蓝花'
                }, {
                    name: '大白菜'
                }]
            },
            methods: {
                add: function() {
                    this.vegetable.push({
                        name: '芹菜'
                    })
                },
                remove: function() {
                    this.vegetable.shift()
                }
            }
        })
    </script>
</body>
</html>

运行效果

在这里插入图片描述

sxh1799
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础之v-for列表循环
qq_43189389的博客
04-23 853
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 示例： <div id="app"> <!--循环数组不带索引--> <ul> <li v-for="item in moveList"&g...
Vue指令之v-for
最新发布
ShadyPi的IT笔记
03-29 255
跟其他语言中的for一样，是用来渲染多个类似实例的。
vue中v-for指令的用法
qq_43753895的博客
11-21 3182
vue中V-for指令的用法欢迎使用Markdown编辑器语法 欢迎使用Markdown编辑器 在vue中，可以使用v-for指令进行数组的循环遍历。 语法 <ul> <li v-for="item in list">{{item}}</li> </ul> <ul> <li v-for="(item,i) in list">{{i}}-{{item}}</li> </ul> //其中，item为遍历元素的别名
002 vue中的 v-for循环
weixin_59519449的博客
01-10 739
v-for指令的经常运用；适合新手入门
02-Vue列表的展示（v-for）
weixin_54327001的博客
10-21 586
内容小结： 如果直接输出数组，输出会与定义一样，带有［］ 为了输出列表，需要ul与li标签 因为数组有多个元素，为了遍历元素，引入了vue-for <li v-for="item in movies">{{item}}</li> 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&
node-v14.16.0-x64
09-22
4. **指令系统**：Vue.js提供了一系列内置指令（如v-if、v-for、v-bind等），方便处理常见的DOM操作。 结合压缩包子文件的文件名称“node-v14.16.0-x64.msi”，这是一个Windows Installer包，用于在Windows操作系统...
Vue.js常用指令之循环使用v-for指令教程
10-19
本文将详细介绍如何使用v-for指令进行数据的循环展示，以及在循环过程中如何处理数组和对象数据结构。 一、基本用法 在Vue.js中，v-for指令的基本语法是使用item in items的形式。在这里，items是指需要迭代的源...
vue.js指令v-for使用及索引获取
10-21
v-for指令是Vue.js中非常强大且灵活的功能，通过掌握它，我们可以实现复杂且动态的用户界面。在实际开发过程中，需要留意其性能影响，因为频繁地更新大量数据可能会对性能造成影响，特别是当组件中包含复杂逻辑或子...
Vue中的v-for指令不起效果的解决方法
10-17
7. 模板编译问题：如果使用了自定义模板引擎或字符串模板，可能需要确保Vue能够正确解析`v-for`指令。 8. 异步数据加载：如果数据是在异步请求后加载的，确保在数据加载完成后再渲染视图。可以使用`Promise.then`或...
vue.js指令v-for使用以及下标索引的获取
10-17
在这篇文章中，作者详细介绍了Vue.js中的v-for指令的使用方法以及如何获取迭代过程中的下标索引。v-for是Vue.js框架中用于渲染列表的一个核心指令，它可以根据数组或对象中的元素来重复渲染一个元素或元素组。 首先...
循环使用 v-for 指令
janever99的专栏
07-09 411
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令 <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> ne...
列表渲染指令v-for
qiutian24的博客
10-06 396
v-for 预期：Array | Object | number | string | Iterable (2.6 新增) 用法： 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名，另外也可以为数组索引指定别名 (或者用于对象的键)。 1.v-for与数组 ...
vue v-for详解
coinisi_li的博客
01-10 6241
为了给 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的使用
m0_62404884的博客
06-05 4890
目录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
第二篇 v-for ( 列表渲染 ) 基础使用1.0
灵魂学者的博客
08-20 849
v-for 做列表循环的基础使用1.0，内容循序渐进
vue3中的v-for
qq_44482048的博客
01-18 5901
vue3中的v-for
vue3【列表渲染】v-for 详细介绍（vue中的“循环”）
XSL_HR的博客
10-15 2万+
在本文之前已经有文章简单概要介绍过vue中的渲染，点击帮你快速复习👏👏，包括条件渲染和列表渲染。二者同样重要，但是对于项目而言，使用更多的是列表渲染，主要表现为“循环”。下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏。
如何使用v-for遍历数据
qq_44534541的博客
05-23 2581
v-for遍历数据 <div id="app"> <!--1.在遍历的过程中，没有使用索引值（下标值） --> <ul> <li v-for="item in names">{{item}}</li> </ul> <!--2.在遍历的过程中，获取索引值--> <ul> <li v-for="(item,index) in names"> {
vue中v-for的用法
热门推荐
前端岚枫
03-05 12万+
当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用，如下 &lt;div id="app"&gt; &lt;ul&gt; &lt;li v-for="（person, index） in persons"&gt; {{ person.name }} &lt;/li&gt; &lt;/ul&gt; &lt;/
2.以下哪个指令表示的是循环遍历 A.v-text="变量 in 数组 B.v-html="变量 in 数组 C.v-for="变量in 数组 D.v-while="变量 in 数组!
05-30
C. `v-for="变量in数组"`。`v-for`指令是Vue.js中用于循环遍历数组或对象的指令。 具体来说，`v-for`指令需要接受一个形如`item in items`的表达式，其中`items`表示要遍历的数组或对象，`item`表示当前遍历到的元素。在遍历过程中，可以使用`item`来访问当前元素的值，并且可以使用特殊变量`index`来访问当前元素在数组中的索引。 例如，下面的代码使用`v-for`指令来遍历一个数组，并将每个元素显示在页面上： ```html <ul> <li v-for="item in items">{{ item }}</li> </ul> ``` 在这个例子中，`v-for`指令遍历了一个名为`items`的数组，并将数组中的每个元素存储在变量`item`中。然后，通过插值表达式`{{ item }}`将每个元素显示在一个`<li>`标签中。 因此，选项C是正确的。选项A、B、D都不正确。`v-text`指令是用于设置元素的文本内容，不涉及循环遍历。`v-html`指令是用于设置元素的HTML内容，同样不涉及循环遍历。`v-while`指令是不存在的，`while`是JavaScript中的一个循环语句，但Vue.js中没有类似的指令。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值