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. 微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateLibraryById

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateLibraryById 1.返回顶部 1. templateMessage.getTem ...

  2. TensorFlow 与cudnn版本不匹配问题

    log:Loaded runtime CuDNN library: 7.1.4 but source was compiled with: 7.2.1. 我安装的事cuda 9.0  cudnn 7. ...

  3. C++之赋值、比较、逻辑运算符

    赋值运算符 **作用:**用于将表达式的值赋给变量 赋值运算符包括以下几个符号: int main() { //赋值运算符 // = ; a = ; cout << "a = & ...

  4. js只能输入数字和小数点

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  5. 什么是Java中的自动拆装箱

    1.基本数据类型 基本类型,或者叫做内置类型,是Java中不同于类(Class)的特殊类型.它们是我们编程中使用最频繁的类型. Java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值 ...

  6. 笔记:Python防止SQL注入

    非安全的方式,使用动态拼接SQL 输入' or 1 = 1 or '1 sql ="""SELECT * FROM goods WHERE name = '%s';&qu ...

  7. vue 挂载点 实例 模板

    挂载点:vue实例 里面的el属性 对应的 id 所在的dom节点 模板:指的是挂载点内部的内容           模板可以写在挂载点内部           也可以写在属性里面 demo < ...

  8. android 自定义shape 带阴影边框效果

    在drawable 里面 建立一个 xml 直接复制 看效果 自己调试就可以 <?xml version="1.0" encoding="utf-8"?& ...

  9. JS的十大经典算法

    冒泡排序(Bubble Sort) 冒泡排序须知: 作为最简单的排序算法之一,冒泡排序给我的感觉就像Abandon在单词书里出现的感觉一样,每次都在第一页第一位,所以最熟悉...冒泡排序还有一种优化算 ...

  10. W3C规范学习

    w3c:万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会.W3C组织是对网络标准制定的一个非赢利组织,W3C是万维网联盟的缩写,像HTML.XHTML.CSS ...