lovecoding
/
VIP20


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="user-list">
        <table>
          <thead>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
          </thead>
          <tbody>
            <!-- 在Vue中 可以 使用v-for指令来根据数组或者对象 去 循环创建 HTML元素 -->
            <!-- v-for="循环变量 in|of users" -->
            <!-- 在 tr 或者 后代节点中 比如td 都可以使用该循环变量 user -->
            <!-- <tr v-for="user of users">
              <td>{{ user.name }}</td>
              <td>{{ user.sex }}</td>
            </tr> -->
            <!-- v-for="(value, index) in|of users" -->
            <tr v-for="(user, index) of users">
              <td>{{ index + 1 }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.sex }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
      var vm = new Vue({
        data: {
          users: [
            {
              id: 1,
              name: '郭郭',
              sex: '男',
            },
            {
              id: 2,
              name: '静静',
              sex: '女',
            },
            {
              id: 3,
              name: '过儿',
              sex: '男',
            },
            {
              id: 4,
              name: '龙儿',
              sex: '女',
            },
          ],
        },
      });
      // 除了使用el外，还可以使用vm的$mount方法指定视图的容器元素
      vm.$mount('#app');
    </script>
  </body>
</html>