vue 中实现动态切换背景图
根据父组件传过来的对象的值改变子组件背景图
点击单选按钮动态切换背景图片 ，请查看：
Vue案例：图片动态切换效果
这个实例的容器分为两大部分，一是左边的大图，二是右边的缩略图，效果图如下：
左边的大图会根据右边的缩略图进行左右滚动，图片的文字也会跟着发生变化，显示图片是第几张，文字也有一个效果，会先消失，然后等图片要切换完成后慢慢出现，缺点就是大图的宽是不能够自适应的，只能固定大小。
右边的缩略图会简体鼠标的滚动，跟着鼠标上下滑动，鼠标点击后图片会产生高亮还会有一个橙色的边框，左边的大图显示相应的图片，这边的缩略图的宽度是可以自适应的。
vue使用swiper的thumbs组件如何显示对应id的图片
首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
div class="swiper-container"
/div
!-- 如果需要分页器 --
div class="swiper-pagination"/div
!-- 如果需要导航按钮 --
div class="swiper-button-prev"/div
!-- 如果需要滚动条 --
/div
导航等组件可以放在container之外
思路很简单：在swiper组件内部添加两个image组件，绑定点击事件，动态改变swiper中的current值。
用Vue写个开关控制两张图的切换，点击换另一种张图，再次点击恢复原图
div class="container"
div class="row"
div class="col-lg-6 col-lg-offset-3 text-center"
div id="app"
button @click="sort"排序/button
i class="fa el-down-icon" v-show="downIcon"/i
i class="fa el-up-icon" v-show="!downIcon"/i
/div
/div
/div
/div
script type="text/javascript"
new Vue({
el: '#app',
data: {
downIcon: true
},
methods: {
sort() {
//根据downIcon判断此时的排序是升序还是降序
//排序方式
//对downIcon对状态进行取反
this.downIcon = !this.downIcon
}
}
})
//这种方法是图标形式的
/script
//下面这种方法是图片形式的
div class="collect" @click="collect" //点击切换状态的方法
img src="./img/star.png" v-show="downIcon"/ //两种状态的图片
img src="./img/timg.png" v-show="!downIcon"/ //两种状态的图片
span收藏/span
/div
new Vue({
el: '#app',
data: {
downIcon: true
},
methods: {
collect() {
//根据downIcon判断此时的状态是true还是false
//对downIcon对状态进行取反
this.downIcon = !this.downIcon
}
}
})
vue.js怎么实现图片轮播？就是一个图片隔一秒换一张，不用别的功能
你开个定时器，一秒换一个img的src不就行了？
随便写了个：
div id="app"
div class="pic"
img :src="now" /
/div
/div
script
new Vue({
el:"#app",
data:{
pic:["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"],
i:"0",
now:"./images/1.jpg",
},
mounted:function(){
this.now=this.pic[0];
var _this=this;
setInterval(function(){
_this.i++;
_this.now=_this.pic[_this.i];
if(_this.i=_this.pic.length-1){
_this.i=0;
}
},1000)
},
methods:{
}
})
/script