1. style

　　可以通过

:style="{height:`${heightData.main}px`}"

实现样式的动态绑定, style绑定的是一个对象,多个样式时用“,”隔开, 要用驼峰式写法.

2. class

　　

<div :class="{ active: isActive }"></div>

可以动态控制class的名, 绑定的对象或者数组, 通过判断isActive的真假来动态控制它显示

Vue的style与class的更多相关文章

  1. 练习vue(class,style属性)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 深入理解VUE样式style层次分析

    刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...

  3. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  5. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  6. Vue 设置style属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue中style下scope的使用和坑

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件 ...

  8. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  9. Vue 的style绑定显示background-image

    data () { return { img: require('你的json资源路径') } } :style="{backgroundImage: 'url(' + img + ')'} ...

随机推荐

  1. CheckBox:屏蔽setChecked方法对OnCheckedChangeListener的影响

    对于CheckBox的OnCheckedChangeListener,有两种情况下会被触发: (1)用户点击了一下CheckBox: (2)代码中调用了setChecked(boolean check ...

  2. ControlDesigner

    GetHitTest https://stackoverflow.com/questions/7762397/how-do-i-click-a-usercontrols-child-in-design ...

  3. js如何生成[n,m]的随机数（整理总结）

    js如何生成[n,m]的随机数(整理总结) 一.总结 一句话总结: // max - 期望的最大值 // min - 期望的最小值 parseInt(Math.random()*(max-min+1) ...

  4. Android 使用Retrofit获取JSON数据

    在大家使用网络请求的时候,往往会出现一种情况:需要拿到服务器返回来的JSON字符串,而Retrofit会默认将Json解析,而又没有直接暴露出拿到Json字符串的方法: 今天测接口的时候,发现当数据正 ...

  5. 目前常见的三种SQL分页方式：

    --top not in方式 select top 条数 * from tablename where Id not in (select top 条数*页数 Id from tablename) - ...

  6. 安装完Python之后，如何设置Python环境变量

    人生苦短,我用Python.最近有许多加群的萌新在咨询Python安装的事宜,Python安装问题不大,可以戳这篇文章:.本以为安装Python之后就可以万事大吉,高枕无忧了,往命令行中输入pytho ...

  7. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. zip-tar

    1.zip 制作压缩文件 (1)格式:zip 压缩文件名 文件1 文件2... zip文件不能用cat查看 (2)选项: -r:用来压缩目录 2.unzip 解压缩文件 (1)格式:unzip 压缩文 ...

  9. python数据处理技巧二

    python数据处理技巧二(掌控时间) 首先简单说下关于时间的介绍其中重点是时间戳的处理,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00 ...

  10. hibernate : object references an unsaved transient instance 问题

    save顺序问题---比如学生表和班级表..学生表里有班级ID的外键.一对多的关系. 你save的时候应该先save班级,再save学生..否则学生的外键没有对应的值,引发异常