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

本文链接：https://blog.csdn.net/2401_84003115/article/details/137663849

本文从创建Vue实例开始，通过属性绑定(v-bind)实现图片切换，讲解了v-if与v-show的差异，并提供了多张图片切换的实战案例，详细介绍了代码实现过程和效果展示。

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

创建一个vue实例命名为app，定义el挂载点，绑定到一个div上，在data属性中定义我们要用的数据
定义一个布尔值isShow用来记录图片的显隐状态
定义一个方法ChangeShow，用来切换图片的显示状态
在div中设置好一个按钮，绑定ChangeShow方法（还记得怎么绑定方法吗？）
在div中设置好图片素材


<!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"><!--屏幕自适应-->

    <title>Document</title>

</head>

<body>

    <div id="app">

        <input type="button" value="召唤龙猫" @click="ChangeShow"/>

        <img v-show="isShow" src="./longmao.jpg" alt="龙猫"/>

    </div>

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

    <script>

        var app=new Vue({

            el:"#app",

            data:{

                isShow:false,

            },

            methods:{

                ChangeShow:function(){

                    this.isShow=!this.isShow;

                },

            }

        })

    </script>

</body>

</html>

1.2效果展示

1.3查看浏览器

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

2.v-if

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

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小

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

2.1与v-show的区别

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


 <img v-if="isShow" src="./longmao.jpg" alt="龙猫"/>

打开浏览器看一下效果

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

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