Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use Vue's v-for loop". In daily operation, I believe many people have doubts about how to use Vue's v-for loop. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to use Vue's v-for loop"! Next, please follow the small series to learn together!

What is Vue.js?

Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library focuses only on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. Vue, on the other hand, is perfectly capable of providing drivers for complex single-page applications when used in conjunction with modern toolchains and various supporting libraries.

In the past few days we have shared Vue's study notes (Part II) and Vue's study notes (Part I), today we will take a look at the next part.

v-for loop of Vue

â-o December (1)

1. Define an ordinary array in data;

data(){ return{ list: [1, 2, 3, 4, 5] } }

2. rendering with v-for directive in html;

Index value is: {{i}} ---Value of each item is: {{item}}

3. The effect diagram is as follows:

(二)v-for循环对象数组

1.在data 中定义对象数组;

data(){ return{ list: [ { id: 1, name: 'zhan1' }, { id: 2, name: 'zhan2' }, { id: 3, name: 'zhan3' }, { id: 4, name: 'zhan4' } ] } }

2.在html中使用v-for指令渲染：

Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引值是：{{i}}

3.效果图如下图：

(三)v-for循环对象，在遍历对象的身上的键值对时候，除了有val、key,在第三个位置还有一个索引值。

1.在data定义一个对象;

data(){ return{ user: { id: 1, name: 'zhan', gender: '男' } } }

2.在html中使用v-for指令渲染：

值是：{{ val }} --- 键是：{{key}} -- 索引值是：{{i}}

3.效果图如下图：

(四)v-for迭代数字 ###在in后面我们放过普通数组、对象数组、对象，还可以放数字，如果使用v-for迭代数字的时候，前面的count值的从1开始。

1.在html中使用v-for指令渲染：

这是第 {{ count }} 次循环

2.效果图如下图：

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

v-for 循环的时候，key 属性只能使用number获取string,在key使用的时候，必须使用v-bind属性绑定的形式，指定key的值，在组件中，使用v-for循环的时候，如果有v-for的同时，指定唯一的字符串/数字类型：key的值。

1.在data 中定义对象数组;

data(){ return{ list: [ { id: 1, name: 'zhan1' }, { id: 2, name: 'zhan2' }, { id: 3, name: 'zhan3' }, { id: 4, name: 'zhan4' } ] } }

2.在html中使用v-for指令渲染代码如下图：

3.效果图如下图：

三、Vue过滤器的基本使用

1.首先定义一个 Vue 全局的过滤器，名字叫做msgFormat，字符串的replace方法的第一个参数，除了可以写一个字符串之外，还可以定义一个正则。

2.在js的代码中，如以下代码：

Vue.filter('msgFormat', function (msg, arg, arg2) { return msg.replace(/day/g, arg + arg2) }) Vue.filter('test', function (msg) { return msg + '========' })

3.在html代码中，如以下代码：

{{ msg | msgFormat('我', '123') | test }}

4.在data中，定义一个msg:

data(){ return{ msg:'the day is cloudless' } }

5.效果图如下图：

到此，关于"如何使用Vue的v-for循环"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧!若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.