vue 循环遍历list_Vue-for循环、循环数组

Vue中，数组遍历和其他语言语法类似，比如有一个数组：list=['a','b','c','d']现在要遍历这个数组，并显示其中的元素和对应的下标，代码如下：{{item}},{{idx}}显示的结果为：image.png现在有另外一个需求，见下面代码我是div-1:{{item}}我是div-2:{{item}}现在需要将上面两行代码放在一个遍历里面去执行，这样的话应该怎么去做呢？第一种就是在两

weixin_39684960

7260人浏览 · 2021-02-22 07:38:09

weixin_39684960 · 2021-02-22 07:38:09 发布

Vue中，数组遍历和其他语言语法类似，比如有一个数组：

list=['a','b','c','d']

现在要遍历这个数组，并显示其中的元素和对应的下标，代码如下：

{{item}},{{idx}}

显示的结果为：

e03f0e2fc893

image.png

现在有另外一个需求，见下面代码

我是div-1:{{item}}

我是div-2:{{item}}

现在需要将上面两行代码放在一个遍历里面去执行，这样的话应该怎么去做呢？

第一种就是在两个div外面包一个div来表示：

我是div-1:{{item}}

我是div-2:{{item}}

还有一种表达方式是通过template来循环，有点类似小程序中的block

我是div-1:{{item}}

我是div-2:{{item}}

两种方式的区别就是div-1和div-2最外层是否会生成一个div元素，第一种方式的dom元素如图：

e03f0e2fc893

image.png

使用template的dom元素如图：

e03f0e2fc893

image.png

两种方式各有优劣，看各自要求来做处理

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^