vue.js+html+css豆瓣案例

Forward九街
已于 2023-04-06 14:09:10 修改
阅读量143
点赞数 1
于 2023-03-28 12:17:39 首次发布
本文链接：https://blog.csdn.net/weixin_65270579/article/details/129813504
版权
<!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">
    <meta name="author" content="Forward九街" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <style>
        /* css部分 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 使得版心居中 */
        .w {
            width: 1200px;
            margin: auto;
        }

        h1 {
            text-align: center;
            display: block;
            position: sticky;
            color: aliceblue;
            line-height: 50px;
            font-size: 25px;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            background-color: rgb(57, 57, 59);
            height: 50px;
        }

        #box {
            border-bottom: 1px dotted rgb(53, 48, 48);
            height: 250px;
            width: 1000px;
            padding-left: 30px;
            padding-top: 30px;
            background-color: aliceblue;


        }

        #left {
            float: left;
        }

        #left img {
            height: 200px;
        }

        #right {
            margin-left: 30px;
            float: left;
            width: 800px;

        }

        p {
            display: block;
            margin-top: 20px;
            color: rgb(73, 71, 71);

        }

        h2 {
            margin-bottom: 20px;

        }

        span {
            color: rgb(78, 75, 75);
            display: inline-block;
            margin-right: 10px;
            font-size: 15px;
        }
    </style>
</head>

<body style="background-color: rgb(88, 76, 76);opacity: 0.5;">
    <!-- html部分 -->
    <div id="root">
    </div>
    <script>
        // vue组件化部分
        Vue.config.devtools = true
        const Moveone = {
            template: `
            <div>
                <h1>简易组件</h1>
               
                <div id="box" class="w" v-for="site in sites">
                    <div id="left">
                        
                        <a :href="site.url" target="_blank">
                            <img :src="site.pic" >
                        </a>
                    </div>
                <div id="right">
                    <h2>{{site.title}}</h2>
                    <span>{{site.rating_num}}</span>
                    <span>{{site.commment_num}}</span>
                    <p>{{site.info}}</p>
                </div>
                </div>
                
            </div>
            `,
            data() {
                return {
                    // 利用数组存放对象，使用for in遍历以下数据
                    sites: [{
                            "title": "肖申克的救赎",
                            "url": "https://movie.douban.com/subject/1292052/",
                            "pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
                            "rating_num": "9.7",
                            "commment_num": "2811907人评价",
                            "info": "导演:弗兰克·德拉邦特FrankDarabont主演:蒂姆·罗宾斯TimRobbins/...1994/美国/犯罪剧情"
                        },
                        {
                            "title": "霸王别姬",
                            "url": "https://movie.douban.com/subject/1291546/",
                            "pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg",
                            "rating_num": "9.6",
                            "commment_num": "2079763人评价",
                            "info": "导演:陈凯歌KaigeChen主演:张国荣LeslieCheung/张丰毅FengyiZha...1993/中国大陆中国香港/剧情爱情同性"
                        },
                        {
                            "title": "阿甘正传",
                            "url": "https://movie.douban.com/subject/1292720/",
                            "pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.jpg",
                            "rating_num": "9.5",
                            "commment_num": "2105656人评价",
                            "info": "导演:罗伯特·泽米吉斯RobertZemeckis主演:汤姆·汉克斯TomHanks/...1994/美国/剧情爱情"
                        },
                        {
                            "title": "泰坦尼克号",
                            "url": "https://movie.douban.com/subject/1292722/",
                            "pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg",
                            "rating_num": "9.5",
                            "commment_num": "2069037人评价",
                            "info": "导演:詹姆斯·卡梅隆JamesCameron主演:莱昂纳多·迪卡普里奥Leonardo...1997/美国墨西哥澳大利亚加拿大/剧情爱情灾难"
                        },
                        {
                            "title": "这个杀手不太冷",
                            "url": "https://movie.douban.com/subject/1295644/",
                            "pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg",
                            "rating_num": "9.4",
                            "commment_num": "2240625人评价",
                            "info": "导演:吕克·贝松LucBesson主演:让·雷诺JeanReno/娜塔莉·波特曼...1994/法国美国/剧情动作犯罪"
                        },
                        {
                            "title": "美丽人生",
                            "url": "https://movie.douban.com/subject/1292063/",
                            "pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2578474613.jpg",
                            "rating_num": "9.6",
                            "commment_num": "1293821人评价",
                            "info": "导演:罗伯托·贝尼尼RobertoBenigni主演:罗伯托·贝尼尼RobertoBeni...1997/意大利/剧情喜剧爱情战争"
                        },
                        {
                            "title": "千与千寻",
                            "url": "https://movie.douban.com/subject/1291561/",
                            "pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
                            "rating_num": "9.4",
                            "commment_num": "2181812人评价",
                            "info": "导演:宫崎骏HayaoMiyazaki主演:柊瑠美RumiHîragi/入野自由Miy...2001/日本/剧情动画奇幻"
                        },
                        {
                            "title": "辛德勒的名单",
                            "url": "https://movie.douban.com/subject/1295124/",
                            "pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p492406163.jpg",
                            "rating_num": "9.6",
                            "commment_num": "1077941人评价",
                            "info": "导演:史蒂文·斯皮尔伯格StevenSpielberg主演:连姆·尼森LiamNeeson...1993/美国/剧情历史战争"
                        },
                        {
                            "title": "盗梦空间",
                            "url": "https://movie.douban.com/subject/3541415/",
                            "pic": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p513344864.jpg",
                            "rating_num": "9.4",
                            "commment_num": "2011932人评价",
                            "info": "导演:克里斯托弗·诺兰ChristopherNolan主演:莱昂纳多·迪卡普里奥Le...2010/美国英国/剧情科幻悬疑冒险"
                        },
                        {
                            "title": "星际穿越",
                            "url": "https://movie.douban.com/subject/1889243/",
                            "pic": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg",
                            "rating_num": "9.4",
                            "commment_num": "1773926人评价",
                            "info": "导演:克里斯托弗·诺兰ChristopherNolan主演:马修·麦康纳MatthewMc...2014/美国英国加拿大/剧情科幻冒险"
                        },
                        {
                            "title": "楚门的世界",
                            "url": "https://movie.douban.com/subject/1292064/",
                            "pic": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p479682972.jpg",
                            "rating_num": "9.4",
                            "commment_num": "1646062人评价",
                            "info": "导演:彼得·威尔PeterWeir主演:金·凯瑞JimCarrey/劳拉·琳妮Lau...1998/美国/剧情科幻"
                        }
                    ]
                }
            }
        }
        new Vue({
            template: `<Moveone> </Moveone>`,
            el: '#root',
            components: {
                Moveone
            }
        })
    </script>
</body>

</html>
浏览器展示部分：