vue 图片切换,vue实现图片旋转

　　这篇文章主要为大家详细介绍了vue。j实现图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了vue。j实现图片切换功能的具体代码，供大家参考，具体内容如下

　　实现功能如下

　　文件目录如下，要实现本功能只需要修改图片的存储位置即可

　　代码如下

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8 /

　　标题/标题

　　脚本src= js/vue。js type= text/JavaScript charset= utf-8 /script

　　/头

　　style type=text/css

　　部门{

　　边距：0自动；

　　宽度：200像素

　　高度：300像素

　　边框：1px固体浅绿色

　　}

　　img {

　　边距：0自动；

　　宽度：200像素

　　高度：250像素

　　边框：1px固体浅绿色

　　}

　　/风格

　　身体

　　div id=应用程序

　　img :src=imgSrc[index]

　　button type= button @ click= prephoto()上一张/按钮

　　button type= button @ click= next photo()下一张/按钮

　　/div

　　脚本类型=文本/javascript

　　var应用=新Vue({

　　埃尔： #app ，

　　数据：{

　　imgSrc:[ ./img/1.jpg "，/img/2.jpg]，

　　指数：1

　　},

　　方法：{

　　prephoto:function(){

　　这个。索引-；

　　if(this.index===-1)

　　{

　　这个。指数=这个。img src。长度-1；

　　}

　　console.log(this.index)

　　},

　　nextphoto:function(){

　　this .索引

　　如果(这个。指数===这个。img src。长度){

　　这个。索引=0；

　　}

　　console.log(this.index)

　　}

　　}

　　})

　　/脚本

　　/body

　　/html

　　适合初学者。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。