Vue.js案例实战——设计照片相册

最新推荐文章于 2024-08-08 08:29:43 发布

小雨滴ya

最新推荐文章于 2024-08-08 08:29:43 发布

阅读量4.1k

点赞数 7

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44805285/article/details/106195302

版权

这篇博客分享了如何使用Vue.js设计一个照片相册。通过引入vue-gallery组件，定义组件并设置模板，结合CSS样式，实现了相册功能。需要注意在template中使用的是反引号`而非单引号，并确保引入vue.min.js库。相册支持左右滑动和点击切换照片。

摘要由CSDN通过智能技术生成

上课讲了一个案例，感觉挺好的，以后的毕业设计也可以直接拿来用。
在HTML页面引入vue-gallery组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js构建的简单照片相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
    <link rel="stylesheet" href="style.css">
    <script src='vue.min.js'></script>
</head>
<body>
    <div class="header">
        <h1>简单的照片相册</h1>
    </div>
    <div class="container" id="app">
        <vue-gallery :photos="photos"></vue-gallery>
    </div>
    </body>
    </html>

在script标签中定义组件vue-gallery，所有的内容在该组件中实现。

<script>
        Vue.component('vue-gallery',{
   
            props: ['photos'],
               data:function(

最低0.47元/天解锁文章

小雨滴ya

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫