『从零开始学Vue』快速上手开发课设属性绑定实现图片切换【图文详细】

本文链接：https://blog.csdn.net/2401_87545747/article/details/142465262

<script>

    var app=new Vue({

        el:"#app",

        data:{

            isShow:false,

        },

        methods:{

            ChangeShow:function(){

                this.isShow=!this.isShow;

            },

        }

    })

</script>




![image-20220606164007268](https://img-blog.csdnimg.cn/img_convert/f2f41920f136614c58f9d4f3b2f49eba.png)



[]( )1.2效果展示

----------------------------------------------------------------------



![vue1](https://img-blog.csdnimg.cn/img_convert/d2ffb80eb0949075fd3d8fa3023e82ca.gif)



[]( )1.3查看浏览器

-----------------------------------------------------------------------



在浏览器中查看源码，可以看到我们通过v-show改变图片的显隐实则时改变的是图片的display属性



![vue2](https://img-blog.csdnimg.cn/img_convert/bd894850114a96dede41934b7de31924.gif)



[]( )2.v-if

=====================================================================



1.  v-if指令的作用是:**根据表达式的真假切换元素的显示状态**

2.  本质是通过**操纵dom元素**来切换显示状态

3.  表达式的值为true,元素存在于dom树中,为false,从dom树中移除

4.  频繁的切换v-show,反之使用v-if,前者的切换消耗小



> Tips：`v-show`和`v-if`都是控制元素的显示与隐藏，但是`v-show`只是视觉上的显隐，而`v-if`则涉及dom元素的增加与删除



[]( )2.1与v-show的区别

----------------------------------------------------------------------------



同样是上面的那个例子，我只修改其中图片的v-if。通过它来实现图片的显隐




打开浏览器看一下效果，可以看到v-if直接操作的是img标签，**操纵dom元素**来切换显示状态



![vue3](https://img-blog.csdnimg.cn/img_convert/009e5dab6e8abb91f215a446dd5cff1c.gif)



[]( )3.v-bind

=======================================================================



v-bind是一个很强大的指令，通过它我们可以操作标签的各种属性



1.  v-bind指令的作用是:为元素绑定属性

2.  完整写法是 `v-bind:属性名`

3.  简写的话可以直接省略v-bind,只保留 `:属性名`

4.  需要动态的增删class建议使用对象的方式



[]( )3.1小例子

---------------------------------------------------------------------



操作img标签的src，title，class为标签绑定属性

<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>

<style>

    .active{

        border: 10px solid red;

    }

</style>

<div id="app">

    <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="changeActive">

</div>

<script src="/js/vue.js"></script>

<script>

    var app = new Vue({

        el:"#app",

        data:{

            imgSrc:"./longmao.jpg",

            imgTitle:"龙猫",

            isActive:false

        },

        methods:{

            changeActive:function(){

                this.isActive=!this.isActive;

            }

        },

    })

</script>




[]( )3.2效果展示

----------------------------------------------------------------------



![](https://img-blog.csdnimg.cn/img_convert/85c3b42f5f313da62980e39fd4fc6552.gif)



[]( )4.图片切换

=====================================================================



一个小案例实现多张图片的切换



1.  定义图片数组

2.  添加图片索引

3.  通过v-bind绑定src属性

4.  通过v-on实现图片切换逻辑

5.  通过v-show实现按钮显示状态切换

<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>

<div id="app">

    <div>

        <!-- 图片标签 -->

        <img :src="imgList[index]" alt="图片" width="30%" height="20%"/>

        <br>

        <!-- 上一张按钮，当图片是第一张时，按钮消失  -->

        <input type="button" value="上一张" @click="prev" v-show="index>0">

        <!-- 下一张按钮，当图片是最后一张时，按钮消失  -->

        <input type="button" value="下一张" @click="next" v-show="index<imgList.length-1">

        

    </div>



</div>

<script src="./js/vue.js"></script>

<script>

    const app=new Vue({

        el:"#app",

        data:{

            // 定义图片数组

            imgList:[

                "./image/img1.jpg",

                "./image/img2.jpg",

                "./image/img3.jpg",

                "./image/img4.jpg"

            ],

            // 添加图片索引

            index:0,

        },

            

        // 定义一个方法通过改变索引切换图片

        methods:{

            prev(){

                this.index--;

            },

            next(){

                this.index++;

            }

        }

    });

</script>




[]( )4.1效果展示

----------------------------------------------------------------------



![vue5](https://img-blog.csdnimg.cn/img_convert/ade2e86a858f264669de170b1f5a7bbe.gif)有点丑浅浅的美化一下吧



![image-20220606191228178](https://img-blog.csdnimg.cn/img_convert/4287fd4c8b9fc543d9513369b3849bfb.png)



[]( )5.代码目录结构

=======================================================================



![image-20220606191441622](https://img-blog.csdnimg.cn/img_convert/be5a6eefdbbbf549783867a31fb572aa.png)



[]( )5.1text5.html

----------------------------------------------------------------------------

<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>

<link rel="stylesheet" href="./style5.css" />

<div id="app">

    <div class="center">

        <h2 class="title"><img src="" alt="">风景美如画</h2>

        <!-- 上一张按钮，当图片是第一张时，按钮消失  -->

        <a href="javascript:void(0)"  @click="prev" class="left" v-show="index>0">

            <img src="./image/prev.png" alt="上一张">

        </a>

        <!-- <input type="button" value="上一张" @click="prev" v-show="index>0"> -->



        <!-- 图片标签 -->

        <img :src="imgList[index]" alt="图片" width="30%" height="20%"/>



        <!-- 下一张按钮，当图片是最后一张时，按钮消失  -->

        <!-- <input type="button" value="下一张" @click="next" v-show="index<imgList.length-1"> -->

        <a href="javascript:void(0)"  @click="next" class="right" v-show="index<imgList.length-1">

            <img src="./image/next.png" alt="下一张">

        </a>

    </div>



</div>

<script src="./js/vue.js"></script>

<script>

    const app=new Vue({

        el:"#app",

        data:{

            // 定义图片数组

            imgList:[

                "./image/img1.jpg",

                "./image/img2.jpg",

                "./image/img3.jpg",

                "./image/img4.jpg"

            ],

            // 添加图片索引

            index:0,

        },

            

        // 定义一个方法通过改变索引切换图片

        methods:{

            prev(){

                this.index--;

            },

            next(){

                this.index++;

            }

        }

    });

</script>




[]( )5.2style5.css

----------------------------------------------------------------------------

html,body,#app{

width: 100%;

height: 100%;

}

#app{

background-image: -moz-linear-gradient(135deg, rgb(176, 255, 158), rgb(253, 189, 255));

background-image: -webkit-linear-gradient(135deg, rgb(176, 255, 158), rgb(253, 189, 255));

background-image: linear-gradient(135deg, rgb(176, 255, 158), rgb(253, 189, 255));

position: relative;

}

{

margin: 0;

padding: 0;

}

#app .center {

position: absolute;

background-color: #fff;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

padding: 10px;

}

#app .center .title {

position: absolute;

display: flex;

align-items: center;

height: 56px;

top: -61px;

left: 0;

padding: 5px;

padding-left: 10px;

padding-bottom: 0;

color: rgba(175, 47, 47, 0.8);

font-size: 26px;

font-weight: normal;

background-color: white;

padding-right: 50px;

z-index: 2;

【附】相关架构及资料

资料领取

点击这里免费获取Android IOC架构设计等资料

left: 0;

padding: 5px;

padding-left: 10px;

padding-bottom: 0;

color: rgba(175, 47, 47, 0.8);

font-size: 26px;

font-weight: normal;

background-color: white;

padding-right: 50px;

z-index: 2;

【附】相关架构及资料

[外链图片转存中…(img-3Vn624b6-1727087329116)]

[外链图片转存中…(img-mF8GhT7I-1727087329116)]

资料领取

点击这里免费获取Android IOC架构设计等资料

领取获取往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。

『从零开始学Vue』快速上手开发课设 属性绑定实现图片切换【图文详细】

【附】相关架构及资料

资料领取

点击这里免费获取Android IOC架构设计等资料

【附】相关架构及资料

资料领取

点击这里免费获取Android IOC架构设计等资料

『从零开始学Vue』快速上手开发课设属性绑定实现图片切换【图文详细】