通过Vue写一个简单的图片点击的小案例。

kyrie Iv

已于 2023-03-21 20:25:32 修改

阅读量283

点赞数

文章标签： vue css vue.js javascript Powered by 金山文档

于 2023-03-20 09:46:11 首次发布

本文链接：https://blog.csdn.net/weixin_64411066/article/details/129660752

版权

1.代码如下：（有详细的注解）

<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">
    <title>Document</title>
    <script src="/vue.js"></script>
</head>
<style>
    #div2 {
        margin: 0 auto;
        width: 1700px;
        border: 1px solid red;
        /* 弹性布局 */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #item {
        margin: 5px 0px;
        height: 213px;
        width: 320px;
        background-color: #ccc;
    }
</style>

<body>
    <div id="div1">
        <div id="div2">
            <!-- 显示组件 -->
            <!-- v-for 循坏  v-bind 绑定-->
            <dog-div v-for="img in imgs" v-bind:im="img"></dog-div>
        </div>
    </div>

    //使用组件
    <template id="dogs-div">
        <div id="item" @click="change">
            <img :src="im" v-show="show">
        </div>
    </template>

</body>
<script>
    //组件化
    //新建组件，注册组件
    Vue.component("dog-div", {
        template: "#dogs-div",
        //自定义属性
        props: ["im"],
        data: function () {
            return {
                show: true
            }
        },
        methods: {
            change: function () {
                this.show = !this.show;
            }
        }
    })
    var vm = new Vue({
        el: "#div1",
        data: {
            //通过数组的方式,准备数据。
            imgs: ["../vue/dog/dog_01.jpg", "../vue/dog/dog_02.jpg", "../vue/dog/dog_03.jpg",
                "../vue/dog/dog_04.jpg", "../vue/dog/dog_05.jpg", "../vue/dog/dog_06.jpg", "../vue/dog/dog_07.jpg"
                , "../vue/dog/dog_08.jpg", "../vue/dog/dog_09.jpg", "../vue/dog/dog_10.jpg", "../vue/dog/dog_11.jpg"
                , "../vue/dog/dog_12.jpg", "../vue/dog/dog_13.jpg", "../vue/dog/dog_14.jpg", "../vue/dog/dog_15.jpg"
                , "../vue/dog/dog_16.jpg", "../vue/dog/dog_17.jpg", "../vue/dog/dog_18.jpg", "../vue/dog/dog_19.jpg"
                , "../vue/dog/dog_20.jpg", "../vue/dog/dog_21.jpg", "../vue/dog/dog_22.jpg", "../vue/dog/dog_23.jpg"
                , "../vue/dog/dog_24.jpg", "../vue/dog/dog_25.jpg"]
        }
    })
</script>

</html>

图片是用ps工具切割；

效果如下：（通过点击图片可以隐藏原来的图片，这里我是用#item的背景色来区分方便看的更加清晰，当点击的时候图片隐藏，#item的背景色显示出来，再次点击图片又重新的出来。）