動態設置背景圖片，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