v-show v-if v-bind指令图片切换案例

最新推荐文章于 2024-03-05 10:52:18 发布

六行代码

最新推荐文章于 2024-03-05 10:52:18 发布

阅读量611

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_55751104/article/details/128882237

版权

v-show

操作显示状态，通过操作样式来实现

在这里插入图片描述

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

    </style>
</head>
<body>
     <div class="app">
        <img  v-show="isShow"  src="./img/tup.gif" alt="">
        <input type="button" value="切换按钮" @click="changeIshow">
     </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
         var app = new Vue({
            el:".app",
            data:{
                isShow:false
            },
            methods:{
                changeIshow:function(){
                    this.isShow = !this.isShow
                }
            }
         })
    </script>
</body>
</html>

v-if

是通过操作元素本身来显示，也是操作布尔元素来进行判断

在这里插入图片描述

<!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 class="app">
        <!-- <img v-show="Ishow"  src="./img/tup.gif" alt=""> -->
         <input type="button" value="按钮" @click="changeIshow">
         <p v-if="Ishow">黑客 </p>
         <h2 v-if="temper > 35">天气不错呦</h2>
     </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
        var app = new Vue({
            el:'.app',
            data:{
               Ishow:true,
               temper:45
            },
            methods:{
               changeIshow:function(){
                  this.Ishow = !this.Ishow
               }
            }
        })
     </script>
</body>
</html>

v-bind指令

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

图片切换案例

在这里插入图片描述

定义数组图片：imgArr
添加图片索引：index
绑定src属性：用v-bind 指令在src属性中，v-bind不写出来，用：号

绑定数组名与索引。
```
 <img :src="imgArr[index]" alt="" />
```
图片切换逻辑

在script写方法，用this调出索引的数据，进行减法，加法

接着在div里添加点击事件，调用方法。
显示状态的切换

用v-show 根据索引的值来进行布偶判断，让图片，在索引不等于0的时候进行切换，小于数组数一位的时候进行停止切换

	 v-show="index !=0"
	 v-show="index<imgArr.length-1"

<!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>
    <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
     <div id="mask">
        <div class="center">
            <h2 class="title">                
                <img src="./images/logo.png" alt="">
                    深圳创维校区环境              
            </h2>
            <img :src="imgArr[index]" alt="" />

            <!-- 左箭头 -->
            <a href="javascript:void(0)"  class="left" v-show="index !=0" @click="prev" >
                <img src="./images/prev.png" alt="" >
            </a>
            <!-- 右箭头 -->
            <a href="javascript:void(0)"  class="right" v-show="index<imgArr.length-1" @click="next" >
                <img src="./images/next.png" alt="">
            </a>
        </div>
     </div>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script>
        var app = new Vue({
           el:'#mask',
           data:{
             imgArr:[
                "./images/00.jpg",
                "./images/01.jpg",
                "./images/02.jpg",
                "./images/03.jpg",
                "./images/04.jpg",
                "./images/05.jpg",
                "./images/06.jpg",
                "./images/07.jpg",
                "./images/08.jpg",
                "./images/09.jpg",
                "./images/10.jpg",
             ],
             index:0
           },
           methods:{
             prev:function(){
                this.index--;
             },
             next:function(){
                this.index++;
             }
           }
        })
     </script>
</body>
</html>

六行代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
v-show v-if v-bind指令图片切换案例

用v-show 根据索引的值来进行布偶判断，让图片，在索引不等于0的时候进行切换，小于数组数一位的时候进行停止切换。绑定src属性：用v-bind 指令在src属性中，v-bind不写出来，用：号。在script写方法，用this调出索引的数据，进行减法，加法。是通过操作元素本身来显示，也是操作布尔元素来进行判断。接着在div里添加点击事件，调用方法。操作显示状态，通过操作样式来实现。定义数组图片：imgArr。添加图片索引：index。
复制链接

扫一扫