首页 > 其他分享 >Vue课程57-循环渲染表格行的数据

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

时间:2023-02-10 10:07:05浏览次数:39  
标签:status Vue name 表格 57 time Date new id

代码部分

<!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>

运行结果

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

标签:status,Vue,name,表格,57,time,Date,new,id
From: https://blog.51cto.com/u_15460007/6048598

相关文章