19.循坏结构-遍历数组

最新推荐文章于 2023-06-05 15:30:36 发布

code_dream_wq

最新推荐文章于 2023-06-05 15:30:36 发布

阅读量125

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110182095

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

v-for

- 用于循环的数组里面的值可以是对象，也可以是普通元素

- key 的作用
- **key来给每个节点做一个唯一标识**
- **key的作用主要是为了高效的更新虚拟DOM**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{{item}}</li>
      <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>
</html>

code_dream_wq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
19.循坏结构-遍历数组

v-for- 用于循环的数组里面的值可以是对象，也可以是普通元素- key 的作用 - **key来给每个节点做一个唯一标识** - **key的作用主要是为了高效的更新虚拟DOM**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><bod...
复制链接

扫一扫