【Vue】图片切换

最新推荐文章于 2024-08-30 20:29:15 发布

freedomSTUDENT

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量674

点赞数 9

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67930426/article/details/134605821

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

上一篇： vue的指令

https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502

本篇所需要的指令有： v-on v-bind v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .image img{
       width: 400px;
        height: 200px;
    }
</style>

<body>

<!--准备容器  -->
<div id="app">
    <button v-show="index>0" @click="index--">上一张</button>
    <div  class="image">
        <img v-bind:src="list[index]" alt="">
    </div>
    <button v-show="index<list.length-1" @click="index++">下一张</button>
</div>

<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/

    var  app=new Vue({
        el:'#app',
        data:{
            index: 1,
            list:[
                './images/damo.jpg',
                './images/direnjie.jpg',
                './images/hanxin.jpg',
                './images/juyoujing.jpg',
                './images/lixin.jpg',
            ]
      }


    });
</script>
</body>
</html>

使用的指令有 v- show v-bind v-on(@)

<style>
    .image img{
       width: 200px;
        height: 100px;
    }
</style>

将图片的宽设置为400px 高设置了200px

准备了几张图片

点击下一张

freedomSTUDENT

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
【Vue】图片切换

使用的指令有 v- show v-bind v-on(@)本篇所需要的指令有： v-on v-bind v-show。将图片的宽设置为400px 高设置了200px。上一篇： vue的指令。
复制链接

扫一扫

专栏目录