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. ionic-CSS:ionic checkbox(复选框)

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  2. [转]C++的Json解析库:jsoncpp和boost

    JSON(JavaScript Object Notation)跟xml一样也是一种数据交换格式,了解json请参考其官网http://json.org,本文不再对json做介绍,将重点介绍c++的j ...

  3. Windows系统下安装MySQL 8.0.11数据库

    MySQL数据库是常用的数据库之一,而且该数据库开源免费,所以很多公司在使用.本文记录如何在Windows系统下安装MySQL数据库,本次安装的版本号为8.0.11,这个版本是当前的最新版本,据宣传, ...

  4. error C1083: 无法打开包括文件: “ui_roadquery.h”: No such file or directory c:\users\administrator\desktop\g_w_j\04 开发阶段\开发工程\imcshowapp\imcshowapp\roadquery.h 5 1 IMCShowApp

    1.我这里出现的原因是忘记将项目文件添加进入项目中,在项目中右击添加即可

  5. 随笔-ansible-1

    系统下所有的操作,从运维操作角度划分为两类: 1.文件传输 2.命令执行 系统下所有的操作,从自动化工作类型角度划分为: 1.应用部署 2.配置管理 3.任务流编排 使用root生成默认的秘钥对: # ...

  6. linux mysql主从复制配置

    1.设置主库master的servie-id值并且开启bin-log功能参数vi /etc/my.cnf修改my.cnf的参数:[mysqld]server-id=1 //每一个库的server-id ...

  7. kaggle 实战 (2): CNN 手写数字识别

    文章目录 Tensorflow 官方示例 CNN 提交结果 Tensorflow 官方示例 import tensorflow as tf mnist = tf.keras.datasets.mnis ...

  8. python_django_models模块中的查询

    查询集:表示从数据库获取的对象集合,查询集可以有多个过滤器,过滤器就是一个函数(方法),基于所给参数限制查询集结果 从sql角度来说,查询集和select等价,过滤器和where等价 查询集特点: 惰 ...

  9. sql count 函数用法

    count(*) 会查询所有记录数,,包括为null值的数据: count(column)不会包含 column值为null的情况: count(1) 和 count(*)相同,,不同的是,,mysq ...

  10. BZOJ 1911 (APIO 2010) 特别行动队

    题目描述 你有一支由n名预备役士兵组成的部队,士兵从1到n编号,要将他们拆分成若干特别行动队调入战场.出于默契考虑,同一支特别行动队中队员的编号应该连续,即为形如(i,i+1,-,i+k)的序列. 编 ...