Vue.js中v-for指令的用法介绍

2024-04-02 19:04:59 303人浏览薄情痞子

摘要

一、什么是v-for指令在vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。二、遍历数

一、什么是v-for指令

在vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用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>
    <!--引入Vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面
               data:{
                      array:[1,2,3,4],//数组
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
                <div>
                    <h1>下面的使用v-for遍历数组</h1>
                    <div>
                          <h1>只显示值</h1>
                          <ul>
                              <li v-for=" v in array">{{v}}</li>
                          </ul>
                      </div>
                      <div>
                        <h1>显示值和索引</h1>
                        <ul>
                            <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>
                        </ul>
                      </div>
                </div>
    </div>
</body>
</html>

其中index表示数组的索引

效果如下图所示：

注意：最新的版本中已经移除了$index获取数组索引的用法

三、遍历对象

代码示例如下：

<!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>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面
               data:{
                      array:[1,2,3,4],//数组
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
                <div>
                    <h1>下面的使用v-for遍历数组</h1>
                    <div>
                          <h1>只显示值</h1>
                          <ul>
                              <li v-for=" v in array">{{v}}</li>
                          </ul>
                      </div>
                      <div>
                        <h1>显示值和索引</h1>
                        <ul>
                            <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>
                        </ul>
                      </div>
                </div>
    </div>
</body>
</html>

效果如下图所示：

四、遍历数组对象

代码示例如下：

<!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>使用v-for指令遍历数组对象</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面
               data:{
                      lists:[
                          {name:"kevin",age:23},
                          {name:"tom",age:25},
                          {name:"joy",age:28}
                      ]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">      
          <div>
                <h1>下面的使用v-for遍历数组对象</h1>
                <div>
                      <h1>只显示值</h1>
                      <ul>
                          <li v-for=" list in lists">name值:{{list.name}},age值:{{list.age}}</li>
                      </ul>
                  </div>
                  <div>
                    <h1>显示值和键</h1>
                    <ul>
                        <li v-for=" (list,index) in lists">name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}</li>
                    </ul>
                  </div>
            </div>
    </div>
</body>
</html>

效果如下图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue.js中v-for指令的用法介绍

本文链接: https://www.lsjlt.com/news/142307.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue.js中v-for指令的用法介绍

一、什么是v-for指令在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。二、遍历数...

99+

2022-11-13
Vue.js中v-bind指令的用法介绍

一、什么是v-bind指令 v-bind指令用于响应更新HTML特性，允许将一个或多个属性动态绑定到表达式。v-bind是应用在动态属性上面的。二、语法 v-bind语法如下： v...

99+

2022-11-13
Vue.js中v-on指令的用法介绍

v-on指令 v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生...

99+

2022-11-13
Vue.js中v-model指令的用法介绍

一、v-model指令 v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。使用v-model可以在表单控件或者...

99+

2022-11-13
Vue.js中v-show和v-if指令的用法介绍

目录一、v-show指令二、v-if指令三、v-show和v-if的区别四、v-else指令五、v-else-if一、v-show指令 v-show指令可以用来动态的控制DOM元素的...

99+

2022-11-13
Vue.js中v-for指令怎么用

这篇文章给大家分享的是有关Vue.js中v-for指令怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、什么是v-for指令在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使...

99+

2023-06-29
Vue.js中v-show和v-if指令怎么用

小编给大家分享一下Vue.js中v-show和v-if指令怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、v-show指令v-show指令可以用来动态的控...

99+

2023-06-29
解析vue.js中常用v-指令

目录Vue中 v-text on if for model bind show 的解释 v-textv-html:v-onv-ifv-forv-modelv-bindv-showv-...

99+

2022-11-12
Vue.js中v-bind指令怎么用

这篇文章给大家分享的是有关Vue.js中v-bind指令怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、什么是v-bind指令v-bind指令用于响应更新HTML特性，允许将一个或多个属性动态绑定到表达式...

99+

2023-06-29
Vue中v-for指令有什么用

这篇文章主要介绍Vue中v-for指令有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！v-for用 v-for 指令根据遍历数组来进行渲染有下面两种遍历形式<div&nb...

99+

2022-10-19
Vue.js中v-model指令如何使用

今天小编给大家分享一下Vue.js中v-model指令如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、v-mode...

99+

2023-06-29
Vue的指令v-for怎么使用

这篇文章主要介绍了Vue的指令v-for怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue的指令v-for怎么使用文章都会有所收获，下面我们一起来看看吧。Vue v-for的使用1.迭代普通数组在da...

99+

2023-06-29
Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用

这篇文章给大家分享的是有关Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。V...

99+

2022-10-19
Vue.js中v-model指令的作用是什么

Vue.js中v-model指令的作用是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。v-model 指令在表单 &l...

99+

2022-10-19
Vue指令之v-for的使用说明

目录Vue v-for的使用1.迭代普通数组2.迭代对象数组3.迭代对象4.迭代数字v-for的最佳使用技巧1.始终在v-for循环中使用key2.不要在循环中使用v-if3.使用计...

99+

2022-11-13
vue指令中的v-once用法

目录v-once在日常开发中用的很多常见用法如下v-once是什么v-once在日常开发中用的很多只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当...

99+

2022-11-13
Vue中列表渲染指令v-for的基本用法详解

目录一、原理概述二、基本用法（1）v-for循环普通数组（2）v-for循环对象（3）v-for循环对象数组（4）v-for迭代整数一、原理概述 v-for指令时在模板编...

99+

2023-05-17

Vue列表渲染指令v-for使用 Vue列表渲染指令v-for Vue列表渲染v-for Vue v-for
Angularjs中的视图和指令介绍

这篇文章主要介绍“Angularjs中的视图和指令介绍”，在日常操作中，相信很多人在Angularjs中的视图和指令介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angu...

99+

2022-10-19
vue中v-for指令的key值可以是index吗

本篇内容介绍了“vue中v-for指令的key值可以是index吗”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！为什么 v-for 的 ke...

99+

2023-06-28
Vue的列表渲染指令v-for怎么使用

这篇文章主要介绍“Vue的列表渲染指令v-for怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue的列表渲染指令v-for怎么使用”文章能帮助大家解决问题。Vue的列表渲染1.1.v-fo...

99+

2023-07-04