动态设置背景图片，class，style

1.动态设置背景图片
<div v-if='img ' :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>
2.动态设置class
<div class="slideAudio" :class="{active:audioActive}"></div>
3.设置多个style
<div :style="{'top':item.top,'left':item.left}"></div>
多个属性中间用逗号隔开

4.swiper插件（vue）

安装

 

cnpm install vue-awesome-swiper --save

全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper';

import 'swiper/dist/css/swiper.css';

Vue.use(VueAwesomeSwiper);

局部引入

import 'swiper/dist/css/swiper.css' //在全局没引入，这里记得要！ 
import { swiper, swiperSlide } from 'vue-awesome-swiper' 
export default { components: { swiper, swiperSlide } }

配置：

<swiper :options="swiperOption">

　　<swiper-slide>I'm Slide 1</swiper-slide>

　　<swiper-slide>I'm Slide 2</swiper-slide>

　　<swiper-slide>I'm Slide 3</swiper-slide>

　　<div class="swiper-pagination" slot="pagination"></div>

</swiper>

js:

export default {

　　data() {

　　　　return {

　　　　　　swiperOption: {

　　　　　　　　 // 所有的参数同 swiper 官方 api 参数一样 //

　　　　　　 }

　　　　 }

　　 },

　　...

}

 引用：https://www.cnblogs.com/stephentian/p/8344258.html

 

转载于:https://www.cnblogs.com/yycc11/p/9796703.html