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. Java-Class-C:com.alibaba.fastjosn.JSON

    ylbtech-Java-Class-C:com.alibaba.fastjosn.JSON 1.返回顶部 1.1.import com.alibaba.fastjson.JSON;import co ...

  2. Ehcache3.x学习(一)入门

    简介 Ehcache 是一个开源的高性能缓存,拥有很高的拓展性和伸缩性,广泛使用各种 Java 项目中(如 Hibernate 默认使用 Ehcache作为二级缓存),在目前基于 Java 的缓存方案 ...

  3. python执行环境

    转自 http://www.cnblogs.com/BeginMan/p/3191856.html 一.python特定的执行环境 在当前脚本继续进行 创建和管理子进程 执行外部命令或程序 执行需要输 ...

  4. scikit-learn 应用

    首先是sklearn的官网:http://scikit-learn.org/stable/ 在官网网址上可以看到很多的demo,下边这张是一张非常有用的流程图,在这个流程图中,可以根据数据集的特征,选 ...

  5. 2018北京网络赛 G The Mole /// 分块暴力 点线距离

    题目大意: 给定n段线段 编号为1~n 接下来m个询问 给定一点 输出离该点最近的线段的最小编号(距离相等时取编号小的) 题解 大致就是 1.坐标范围为(0,2^16-1) 将坐标系划分为2^8*2^ ...

  6. mysql保存当前时间精确到秒

       用mybatis在mysql中保存字段精确到秒须要两个步骤. 1.如今mysql中将时间字段改为datetime 比如:alter table tablename add pay_date da ...

  7. docker删除常见命令

    $ docker stop $(docker ps -a | grep "Exited" | awk '{print $1 }') //停止容器 1b7067e19d6f a840 ...

  8. 【转】详解tomcat的连接数与线程池

    对tomcat线程池.Connector的BIO.NIO解析的很透彻的一篇文章. 原文链接:https://www.cnblogs.com/kismetv/p/7806063.html 前言 在使用t ...

  9. Spring Security 自定义登录页面

    SpringMVC + Spring Security,自定义登录页面登录验证 学习参考:http://www.mkyong.com/spring-security/spring-security-f ...

  10. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...