Vue realizes picture switching effect
|
This article example shares the specific code of Vue to achieve the effect of picture switching for your reference. The specific content is as follows 1) v-if/v-show Both can be used to hide and show elements. But the implementation principles are different: 2) v-bind v-bind can modify the attribute value of an element. Functional requirements 1) Click the button on the left to display the previous picture; if the picture is the first one, hide the button
Implementation Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Image switching effect</title>
<style>
#test{
position: absolute;
}
#left{
position: absolute;
top: 134px;
z-index: 99;
width: 24px;
height: 32px;
background-color: black;
color: white;
font-size: 24px;
opacity: 0.6;
cursor: pointer;
}
#right{
position: absolute;
right: 0;
top: 134px;
z-index: 99;
width: 24px;
height: 32px;
background-color: black;
color: white;
font-size: 24px;
opacity: 0.6;
cursor: pointer;
}
img{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="test" >
<div id="left" @click = "changeleft" v-if="lefttt"> < </div>
<img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
<div id="right" @click = "changeright" v-show="righttt"> > </div>
</div>
</body>
<!-- Development version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var dated = new Vue({
//Mount point el: "#test",
//data: {
num: 1,
lefttt:false,
righttt:true,
},
methods: {
changeleft : function (){
if(this.num <= 2){
this.lefttt=false;
this.num = 1;
}else{
this.lefttt=true;
this.num--;
}
this.righttt=true;
},
changeright : function (){
if(this.num >= 7){
this.righttt=false;
this.num = 8;
}else{
this.righttt=true;
this.num++;
}
this.lefttt=true;
}
}
});
</script>
</html>Effect1) When displaying the first picture
2) When displaying the last picture
3) When displaying other pictures
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySQL group by method for single word grouping sequence and multi-field grouping
>>: Detailed explanation of the idea of xshell remote login to CentOS7 without password login
Recommend
A brief discussion on the role of Vue3 defineComponent
Table of contents defineComponent overload functi...
Web design must have purpose, ideas, thoughts and persistence
<br />Introduction: This idea came to me whe...
Tutorial on disabling and enabling triggers in MySQL [Recommended]
When using MYSQL, triggers are often used, but so...
Mysql 8.0 installation and password reset issues
Mysql 8.0 installation problems and password rese...
Solve the problem that some configuration files in /etc are reset after the docker container is restarted
1. The three files /etc/hosts, /etc/resolv.conf a...
Navicat for MySQL scheduled database backup and data recovery details
Database modification or deletion operations may ...
Detailed explanation of VueRouter routing
Table of contents vue router 1. Understand the co...
The actual process of encapsulating axios in the project
Table of contents Preface Benefits of axios encap...
Detailed process of modifying hostname after Docker creates a container
There is a medicine for regret in the world, as l...
The solution to the page not refreshing after the route changes after react jumps
Table of contents question Solution question Ther...
How to add Nginx to system services in CentOS7
Introduction After compiling, installing and solv...
Two ways to make IE6 display PNG-24 format images normally
Method 1: Please add the following code after <...
A detailed introduction to seata docker high availability deployment
Version 1.4.2 Official Documentation dockerhub st...
MySQL 8.0.3 RC is about to be released. Let’s take a look at the changes
MySQL 8.0.3 is about to be released. Let’s take a...
Summary and practice of javascript prototype chain diagram
Table of contents Prototype chain We can implemen...