Vue课程57-循环渲染表格行的数据

代码部分

<!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>
	</head>
	<body>
        <div id="app">
          
        
            <!-- 表格区域 -->
            <table class="table table-bordered table-hover table-striped">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">品牌名称</th>
                  <th scope="col">状态</th>
                  <th scope="col">创建时间</th>
                  <th scope="col">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.name }}</td>
                  <td>
                    <div class="custom-control custom-switch">
                      <!-- 使用 v-model 实现双向数据绑定 -->
                      <input type="checkbox" class="custom-control-input" :id="'cb' + item.id" v-model="item.status">
                      <!-- 使用 v-if 结合 v-else 实现按需渲染 -->
                      <label class="custom-control-label" :for="'cb' + item.id" v-if="item.status">已启用</label>
                      <label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label>
                    </div>
                  </td>
                  <td>{{ item.time }}</td>
                
                </tr>
              </tbody>
            </table>
          </div>
		<script src="./lib/vue-2.6.12.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data:{
                    list: [
					{ id: 1, name: '宝马', status: true, time: new Date() },
					{ id: 2, name: '奔驰', status: false, time: new Date() },
					{ id: 3, name: '奥迪', status: true, time: new Date() },
				],
                }
			})
		</script>
	</body>
</html>

运行结果

posted @   前端导师歌谣  阅读(154)  评论(0)  编辑  收藏  举报
相关博文：
·  vue再读19-表格案例--渲染页面
·  vue再读57-表格案例--axios-列表渲染
·  Vue-循环渲染
·  v-for循环
·  vue通过表格当中的数据渲染表格
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示