vue-列表的渲染

一勺雪糕

已于 2023-08-04 09:52:28 修改

阅读量147

点赞数 1

文章标签： vue.js javascript 前端

于 2023-08-04 09:34:41 首次发布

本文链接：https://blog.csdn.net/TianMing_xe/article/details/132097184

版权

代码

<!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>列表渲染</title>
    <script src="../file/vue.js"></script>
  </head>
  <body>
    <!-- 列表渲染通过v-for实现 -->
    <div id="test1">
      <h1>数组渲染到列表</h1>
      <!-- 通过数组的遍历进行渲染,其格式为：数组中每一个元素的名字 in 数组名，其中arrA为数组，e为数组中每一个元素的名字，搭配插值表达式进行渲染 -->
      <ul>
        <li v-for="e in arrA">{{e}}</li>
      </ul>
    </div>
    <hr />
    <div id="test2">
      <h1>对象渲染到列表</h1>
      <!-- 渲染对象到页面格式为：对象名 in 对象 ，会将对象的信息遍历展示 -->
      <ul>
        <li v-for="d in dog">{{d}}</li>
      </ul>
    </div>
    <hr />
    <div id="test3">
      <h1>多个对象渲染到表格中</h1>
      <!-- 将多个对象渲染到表格中，就是将多个相同对象放入集合中，通过遍历集合的方式将集合中的对象渲染到表格中 -->
      <table border="1px" cellspacing="0px">
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>性别</td>
          <td>年龄</td>
        </tr>
        <tr v-for="p in peopleList">
          <td>{{p.id}}</td>
          <td>{{p.name}}</td>
          <td>{{p.sex==M?'男':'女'}}</td>
          <td>{{p.age}}</td>
        </tr>
      </table>
    </div>
    <script>
      //数组渲染到列表的Vue实例
      new Vue({
        el: "#test1",
        data: {
          arrA: ["语文", "数学", "英语"],
        },
      });
      //对象渲染到列表的Vue实例
      new Vue({
        el: "#test2",
        data: {
          dog: {
            name: "小花",
            sex: "雄性",
            age: "2岁",
          },
        },
      });
      //多个对象渲染到表格中
      new Vue({
        el: "#test3",
        data: {
          //这里没有和后端交互自己写点数据
          peopleList: [
            {
              id: 1001,
              name: "张三",
              age: 20,
              sex: "M",
            },
            {
              id: 1002,
              name: "李四",
              age: 21,
              sex: "F",
            },
            {
              id: 1003,
              name: "赵六",
              age: 22,
              sex: "M",
            },
            {
              id: 1004,
              name: "六七",
              age: 23,
              sex: "F",
            },
          ],
        },
      });
    </script>
  </body>
</html>