Vue的简单操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div id="app" class="demo">
    <input type="button" v-show="index!=1" value="上一张" @click="pre">
        <input type="button" v-show="index!=60" value="下一张" @click="next">
    <div id="center">
            <img :src="imgSrc" height="500px" width="500px" alt="点击展开">
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el:"#app",
    data:{
        index:0,
        imgSrc:"",
    },
    methods:{
        pre:function(){
            if (this.index>1) {
                this.index--;
                this.imgSrc="D:\\img\\"+this.index+".jpg";
            }else{
                alert("到头啦！！");
            }
        },
        next:function(){
            if (this.index<60) {
                this.index++;
                this.imgSrc="D:\\img\\"+this.index+".jpg";
            }else{
                alert("没有更多了！！");
            }
        }
    },
})

</script>
</body>
</html>

图片的切换：

分别有上一张和下一张的按钮，首页没有上一张，尾页没有下一张，注意图片路径

posted on 2022-07-27 15:57 时间完全不够用啊阅读(45) 评论(0) 编辑收藏举报