Vue完成的图片转换

今天我们要做的就是通过Vue来完成图片的自动转换，首先我们应该准备好四张图片。图片的格式最好都一样。

在使用Vue的时候我们需要插入对应的库

库文件https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js

我使用的是这个版本，当然你也可以选择更高的版本，根据自己需求。

我这里使用的是HBuilder x这个软件非常方便，直接把需要的图片和库文件都可以直接的丢进去啊。

从代码中可以看到我对于我自己选择的四张图片的宽和高都进行了设置，因为我希望四张图片大小一致。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="js/vue2.6.14/vue.js"></script>
       <style>
       .pj{
           width: 400px;
           height: 300px;
       }

       </style>
   </head>
   <body>
       <div id="app">
           <img :src="img" alt="" class="pj"/><br>

       </div>
       <script type="text/javascript">
       var vm=new Vue({
           el:"#app",
           data(){
               return{
                   img:"./img/2.jpg",
                   ind:1,
                   list:["./img/1.jpeg","./img/2.jpg","./img/3.jpeg","./img/4.jpg"]
               }
           },
       created(){
           this.goto();
           },
           methods:{
               goto(){
               var that=this;
               setInterval(function(){
                   that.ind++;
                   if(that.ind>4) that.ind=1;
                   that.img=that.list[that.ind-1];
               },5000);
               }
           }
       })
       </script>
   </body>
</html>

我这里使用的软件是HBuilder x,对于这个软件都是根据个人的喜好自己决定。我选择这个软件是因为非常的方便，而且我最开始学习前端的时候就是使用这个软件。

Vue完成的图片转换相关推荐

VUE Base64编码图片展示与转换图片
VUE Base64编码图片展示与转换图片 VUE Base64编码图片展示与转换图片 VUE Base64编码图片展示 Base64编码转换图片文件转换base64编码更便捷的图片转化Base6 ...
php长按图片保存mui,Vue+mui实现图片的本地缓存
这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: c ...
Vue 如何将网页转换成PDF实现步骤以及问题解决：
实现步骤:(只想了解vue实现的不用看方法一,直接看二) 方法1: 使用node.js和puppeteer(谷歌自动检测工具),由于第一种尝试结果不太理想,所以我直接粗略讲解:(原代码实现如下,依赖包 ...
【OpenCV】图像/视频相似度测量PSNR( Peak signal-to-noise ratio) and SSIM,视频/图片转换
目录 1 目标 2 原理 2.1 图像比较 - PSNR and SSIM¶ 3 代码 3.1如何读取一个视频流(摄像头或者视频文件)?¶ 3 运行效果视频/图片转换: 如何用OpenCV创建一个视 ...
java png 转jpg_怎么用java将png图片转换成jpg格式的图片
png是一种背景透明格式的图片,大量用于网络上,保真性很好,JPG是压缩图片,占用空间少.但有一些失真,所以在将png图片转换成jpg图片之后,肯定是有一些差异的,毕竟这是两种不同的格式. 下面用一个 ...
c 将图片存入到mysql数据库中_如何将图片转换存入到数据库中，并从数据库中取出转换成图片...
有时候我们想把图片存入到数据库中,尽管这不是一种明智的选择,但有时候还是不得以会用到,下面说说将图片转换成byte[]数组存入到数据库中去,并从数据库中取出来转换成图像显示出来. 首先,我们要把图片存 ...
python 怎么将数组转为列表_图片转换成pdf格式怎么操作？什么软件能将图片转为pdf？...
伙伴们好,你们知道如何把图片转为pdf格式吗?前一阵子我参加了一个家居行业大会,在会议上拍摄了不少会议照片,包括主持人讲话.嘉宾出席.观众提问.产品推广等环节都拍摄了不同的角度.拍摄好后,需要传送给写 ...
xsd文件转图片_图片转换成PDF格式怎么转？图片转换成PDF的软件哪个好？
图片转换成PDF格式怎么转?经验丰富的设计师在完成图片格式的设计作品后都会将图片转成PDF格式文件,这样方便保存以及参加一些设计比赛.同时我们在保存大量图片的时候也可以将图片转换成PDF文件.但是还有 ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...

Vue完成的图片转换

Vue完成的图片转换相关推荐

最新文章

热门文章