在Vue中,数组遍历与其他语言的语法类似。 例如,有一个数组:
list=['a '、' b '、' c '、' d']
要遍历此数组以显示其中的元素和对应的下标,代码如下所示:
{{item}}、{{idx}}的结果如下。
image.png
还有一个需求。 请参阅以下代码
我是div-1:{{item}}。 我是div-2:{{item}}。 现在需要把上面两行代码放在一个扫描中执行。 那样我该怎么办?
第一个是在两个div之外由一个div表示:
我是div-1:{{item}}。 我是div-2:{{item}}。 另一种表达方式是用模板循环。 类似于小程序的block
我是div-1:{{item}}。 我是div-2:{{item}}。 两种方法的区别在于div-1和div-2的最外层是否生成div元素。 第一种方法的dom元素如图所示。
image.png
使用template的dom元素图示:
image.png
两种方式各有优劣,按各自的要求处理