使用Vue渲染swiper模板,按钮点击设置渲染内容

最新推荐文章于 2024-09-05 01:11:23 发布

Byte_Dance

最新推荐文章于 2024-09-05 01:11:23 发布

阅读量904

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/Byte_Dance/article/details/81841685

Vue.js 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现动态显示不同分组图片的示例。通过按钮触发不同的方法来控制显示全部图片或是单独显示某个分组的图片。此示例包括了基本的HTML结构、Vue实例化及事件绑定等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>



    <div id="app">
        <button @click="btn()">全部</button>
        <button @click="btn1()">第一组</button>
        <button @click="btn2()">第二组</button>
        <button @click="btn3()">第三组</button>

        <div v-for="item in Arrays" :id="item.type" :class="cls">
            <h1>{{item.title}}</h1>
            <img :src="item.srcs" alt="">
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                cls:'bt',
                //插值数组
                Arrays:[
                    {
                        title:"第一组",
                        type:'1',
                        srcs:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534688762840&di=77808492e0f983d6a5fa15696b18c346&imgtype=0&src=http%3A%2F%2Fimg9.zol.com.cn%2Fdesk%2F800_440%2F439091.jpg',

                    },
                    {
                        title:"第二组",
                        type:'2',
                        srcs:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534688762840&di=cdea47c1fc3dcbae33892dda1c46c5a2&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fnbbbs%2F8360%2Fa8359626_s.jpg'
                    },
                    {
                        title:"第三组",
                        type:'3',
                        srcs:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534688762840&di=9042c4ce944e2832db1b96e4df53be89&imgtype=0&src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F7676%2F7675079_0800.jpg'
                    }
                ]
            },
            methods:{
                // 显示全部按钮点击调用该方法
                btn:function() {
                    var ds = document.getElementsByClassName("bt");
                    //使用 for in循环遍历所有的组
                    for (var i in ds){
                        ds[i].style.display="block";
                    }
                },

                // 显示第一组按钮点击调用该方法
                btn1:function() { document.getElementById("1").style.display="none";},

                // 显示第二组按钮点击调用该方法
                btn2:function() { document.getElementById("2").style.display="none";},

                // 显示第三组按钮点击调用该方法
                btn3:function() { document.getElementById("3").style.display="none";}
            }
        })
    </script>
</body>
</html>