Vue学习，使用Vue完成商品展示

阿娜依

已于 2023-08-20 22:10:51 修改

阅读量392

点赞数

分类专栏：项目实战文章标签： vue.js html5 css

于 2023-08-20 22:03:04 首次发布

本文链接：https://blog.csdn.net/qq_60656889/article/details/132396805

版权

项目实战专栏收录该内容

3 篇文章 1 订阅

订阅专栏

使用前需要前往Vue官网下载vue.js文件，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
        text-decoration: none;
    }

    #box {
        height: 800px;
        width: 1500px;

    }

    .box_left {
        height: 100%;
        width: 250px;
        background-color: seashell;
        float: left;
    }

    .box_right {
        float: left;
        height: 100%;
        width: 1230px;

    }

    ul {
        margin-top: 10px;
    }

    .ul_list li {
        float: left;
        margin-right: 30px;
        margin-bottom: 20px;
    }

    .dl_sty {
        border: 1px solid black;
        width: 220px;
        float: left;
        padding: 10px;
        margin: 10px;
    }

    .dl_sty img {
        height: 300px;
        width: 220px;
    }
</style>

<body>
    <div id="box">
        <div class="box_left">
            <div v-for="(ss,i) in listObj">
                <p style="color: red;font-weight: bold;clear: both;margin-top: 10px;">{{ss.id}}<br></p>

                <ul class="ul_list" v-for="v in ss.name">
                    <li><a href="">{{v}}</a></li>
                </ul>
            </div>
        </div>
        <div class="box_right">
            <div v-for="val in splist">
                <dl class="dl_sty">
                    <dt><img :src="val.asrc" alt=""></dt>
                    <dd>{{val.spname}}</dd>
                    <dd>批发价：<span style="color: red;">{{val.price}}</span></dd>
                </dl>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {

            listObj: [{
                id: "上装",
                name: ['上装', '裙装', '裤装', '外套', '特色女衣', '配件/饰品']
            },
            ],

            splist: [{
                asrc: "img/00.png",
                spname: "淑女长版外套",
                price: "￥299.00",
            }],
        },
    });
</script>

</html>