【Vue.js】渲染商品列表

最新推荐文章于 2024-04-13 10:43:31 发布

夹心776655

最新推荐文章于 2024-04-13 10:43:31 发布

阅读量1.3k

点赞数 1

分类专栏：代码实例 Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_37086980/article/details/112848418

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

Vue.js

30 篇文章 1 订阅

订阅专栏

Vue.js框架渲染商品列表

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue渲染商品列表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./goods.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 750px;
            height: 600px;
            margin: 20px auto;
            background: #f3f4f5;
        }

        ul li {
            width: 175px;
            height: 285px;
            background: #ffffff;
            border: 1px solid #e7e7e7;
            border-radius: 5px;
            float: left;
            margin: 10px 0 0 7px;
        }

        .img {
            width: 170px;
            height: 170px;
        }

        .price {
            margin: 15px 0 0 10px;
            font: bold 16px "Arial";
        }

        .price i {
            display: inline-block;
            width: 45px;
            height: 15px;
            background-image: repeating-linear-gradient(90deg, #dc459f 0, #cc75d8 100%);
            color: #ffffff;
            font: 11px/15px "微软雅黑";
            text-align: center;
            border-radius: 7.5px;

        }

        .desc {
            margin: 10px 15px 0 8px;
            font: 14px/16px "微软雅黑";
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in goods">
                <!-- 1.image -->
                <a :href="item.url">
                    <img :src="item.img" alt="goods" :class="imgClass">
                </a>
                <!-- 2.price -->
                <div :class="priceClass">
                    <i>特卖价</i>
                    ￥{{item.price.toFixed(2)}}
                </div>
                <!-- 3.description -->
                <p :class="descClass">
                    {{item.name}}
                </p>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                goods: goods,
                imgClass: 'img',
                priceClass: 'price',
                descClass: 'desc'
            }
        })
    </script>
</body>

</html>

夹心776655

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
【Vue.js】渲染商品列表

Vue.js框架渲染商品列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue渲染商品列表</title> <script src="https:
复制链接

扫一扫