HTML!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width initial-scale=10 title作业6titleheadbody
根据代码的缺失部分,可以补全如下代码:
<!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>作业6</title>
</head>
<body>
<div id="app">
<table id="brandTable" border="1" cellspacing="0" width="100%">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr align="center" v-for="(brand, index) in brands">
<td>{{ index + 1 }}</td>
<td>{{ brand.brandName }}</td>
<td>{{ brand.companyName }}</td>
<td>{{ brand.ordered }}</td>
<td>{{ brand.description }}</td>
<td>
<span v-if="brand.status === 1" style="color:green">启用</span>
<span v-else style="color:red">禁用</span>
</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
brands: [{
brandName: "三只松鼠",
companyName: "三只松鼠",
ordered: "100",
description: "三只松鼠,好吃不上火",
status: 1
}, {
brandName: "优衣库",
companyName: "优衣库",
ordered: "10",
description: "优衣库,服适人生",
status: 0
}, {
brandName: "小米",
companyName: "小米科技有限公司",
ordered: "1000",
description: "为发烧而生",
status: 0
}, {
brandName: "华为",
companyName: "华为科技有限公司",
ordered: "100",
description: "没有伤痕累累,哪来皮糙肉厚,英雄自古多磨难",
status: 1
}]
}
});
</script>
</body>
</html>
在补全的代码中,主要是在表格中使用了v-for指令来循环遍历brands数组,并根据每个品牌的属性动态显示在表格中。另外,在状态列中使用了v-if和v-else指令来根据品牌的状态值来显示不同的文字颜色
原文地址: http://www.cveoy.top/t/topic/iPf6 著作权归作者所有。请勿转载和采集!