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. 理解ThreadLocal类

    1 ThreadLocal是什么 早在JDK 1.2的版本号中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类能够 ...

  2. Windows改动cmd字符集

    在中文Windows系统中,假设一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗体(所谓的DOS窗体)中不能正确显示文件里的内容.在默认情况下,命令行窗体中使用的代码页是中文或者美国的,即 ...

  3. CentOS 中使用yum出现的“UnicodeDecodeError: &#39;ascii&#39; codec”问题解决方法

    问题 新装了CentOS 6.5系统,打算使用yum安装程序是出现了例如以下错误: Loading mirror speeds from cached hostfile Traceback (most ...

  4. .net framework tools

    https://docs.microsoft.com/en-us/dotnet/framework/tools/ Resgen.exe (Resource File Generator) Conver ...

  5. git帮助命令

    git帮助命令 零.自己实例 cd D://software/code/PHP/phpStudy/PHPTutorial/WWW/github/m_Orchestrate git checkout - ...

  6. Linux下图解minicom安装

    Linux下图解minicom安装 minicom是一个串口通信工具,就像Windows下的HyperTerminal.可用来与串口设备通信,如调试交换机和Modem等.它的Ubuntu软件包的名称就 ...

  7. mvc下是如何传值的

    最近在开发一个项目,用的是mvc框架,现将mvc会用到的常用传值方法总结如下: 在讲传递参数方法之前,先简单介绍一下MVC路由及运行机制.     首先,Web 浏览器向服务器发送一条URL 请求,如 ...

  8. ES6学习笔记（一）新的变量定义命令let和const

    1.一些历史 ES6(ECMAScript 6.0)是 JavaScript 语言的新一代标准,于2015 年 6 月正式发布,距今已经4年了,它的目标,是使得 JavaScript 语言可以用来编写 ...

  9. 重装python 和 yum

    https://blog.csdn.net/ghostyusheng/article/details/https://segmentfault.com/q/1010000009194060/a-102 ...

  10. IntelliJ IDEA 详细图解最常用的配置 ，适合刚刚用的新人。（转）

    IntelliJ IDEA使用教程 (总目录篇) 刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工. 比如:设置文件字体大小,代码自动完成提示,版本管理 ...