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. 第36讲 谈谈MySQL支持的事务隔离级别,以及悲观锁和乐观锁的原理和应用场景

    在日常开发中,尤其是业务开发,少不了利用 Java 对数据库进行基本的增删改查等数据操作,这也是 Java 工程师的必备技能之一.做好数据操作,不仅仅需要对 Java 语言相关框架的掌握,更需要对各种 ...

  2. Spring AOP之注解实现

    在自定义个注解之后,通过这个注解,标注需要切入的方法,同时把需要的参数传到切面去.那么我们怎么在切面使用这个注解.我们使用这个自定义注解一方面是为了传一些参数,另一方面也是为了省事.具体怎么省事,看我 ...

  3. 神经网络中使用Batch Normalization 解决梯度问题

    BN本质上解决的是反向传播过程中的梯度问题. 详细点说,反向传播时经过该层的梯度是要乘以该层的参数的,即前向有: 那么反向传播时便有: 那么考虑从l层传到k层的情况,有: 上面这个 便是问题所在.因为 ...

  4. java 传入多个参数时报"Parameter 'XXX' not found. Available parameters are [arg1, arg0, param1,..." 解决方案

    @Select("SELECT id FROM ae_post ORDER BY id DESC LIMIT #{page},#{size}") List<Post> ...

  5. 【ArcObject】 AxTocControl:实现图层可移动

    设置axTocControl属性:EnableLayerDragDrop 为true即可

  6. JS对象 charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

    返回指定位置的字符 charAt() 方法可返回指定位置的字符.返回的字符是长度为 1 的字符串. 语法: stringObject.charAt(index) 参数说明: 注意:1.字符串中第一个字 ...

  7. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  8. Android开发 AndroidStudio解决Error:moudle not specified

    问题描述 在使用Android Studio 进行Builder APKs的时候,如果发现无法degub, 进行配置的时候 没有module可以进行指定 问题原因 项目未与Grade Files 文件 ...

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

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

  10. not registered via @EnableConfigurationProperties or marked as Spring component

    利用@ConfigurationProperties(prefix = "")来绑定属性时报错: not registered via @EnableConfigurationPr ...