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

动态设置背景图片,class,style的更多相关文章

  1. 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...

    关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...

  2. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. background-size 设置背景图片的大小

    background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...

  4. android设置背景图片透明

    设置Activiyt为透明可以在Activity中引用系统透明主题android:theme="@android:style/Theme.Translucent" 设置背景图片透明 ...

  5. background-size (设置背景图片的大小)

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  6. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  7. 为窗体设置背景图片-UI界面编辑器(SkinStudio)教程

    1.1.   为窗体设置背景图片 在窗体的Background属性中选择图片设置为窗体背景图片

  8. UIView 设置背景图片

    http://blog.csdn.net/qijianli/article/details/7777268 项目中,可能需要我们为某个视图设置背景图片,而API中UIView没有设置背景图片的方法,那 ...

  9. tr设置背景图片

    tr是不能设置背景图片的....

随机推荐

  1. 导出lab动态命名文件夹文件名

    set tmp=%date:~0,10%echo %tmp:/=-%mkdir %tmp:/=-%cd %tmp:/=-%exp meet/meet@orcl_11 file=%tmp:/=-%.dm ...

  2. sql准确判断某个ip

    问题:如图 当我执行sql要准确查找某个IP是属于哪个库室时候,我刚开始是这样写的 select * from Definition_Read_Room where HFIP like '%172.2 ...

  3. Hadoop搭建,上传文件时出现错误,没有到主机的路由

    解决方案:(1)从namenode主机ping其它slaves节点的主机名(注意是slaves节点的主机名),如果ping不通,原因可能是namenode节点的/etc/hosts 未配置主机名与IP ...

  4. 04E: Sub-process /usr/bin/dpkg returned an error code (1)

  5. spring在普通类中获取session和request

    在使用spring时,经常需要在普通类中获取session,request等对像.比如一些AOP拦截器类,在有使用struts2时,因为struts2有一个接口使用org.apache.struts2 ...

  6. centos7.3更换ssh默认登陆端口

    说明:本方法目前通用于7.1-7.3 vim /etc/ssh/sshd_config 找到Port 22下面添加一行:Port 12345保存退出. systemctl restart sshd.s ...

  7. 两个table合并

    1.两个一样的table合并用Merge函数即可合并(但要求table要有主键id) DataTable1.Merge(DataTable2); 2.没写完,以后继续补充(只有经过笔者验证,能用的才会 ...

  8. python库之sklearn

     一.安装sklearn conda install scikit-learn 参考文献 [1]整体介绍sklearn https://blog.csdn.net/u014248127/article ...

  9. 简单的 js手写轮播图

    html: <div class="na1">   <div class="pp">    <div class="na ...

  10. E: Sub-process /usr/bin/dpkg returned an error code (1)解决办法

    解决方法: 先将info文件夹更名 sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 新建一个新的info文件夹 sudo mkdir /var/lib ...