根据代码的缺失部分,可以补全如下代码:

<!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-ifv-else指令来根据品牌的状态值来显示不同的文字颜色

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

原文地址: http://www.cveoy.top/t/topic/iPf6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录