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. 怎样在HP-UX中安装bash？

     怎样在HP-UX中安装bash? 注:HPUX全称是Hewlett Packard UniX是惠普9000系列server的Unix操作系统,能够在HP的PA-RISC处理器.Intel的Ita ...

  2. Java中AtomicInteger的使用!!!

    今天在看Volley的源码的时候,看到里面使用了AtomicInteger这个类,曾经没用过,今天看了一下API学习了一下: 首先介绍一下这个类的用处,这个类主要是用来替换java中的自增和自减操作, ...

  3. python学习之--SyntaxError: Non-ASCII character '\xe5'

    在安装好eclipse之后试了一下 创建了了一个pydev project package.module 在test.py中编写最简单的命令 print "helloworld" ...

  4. 实习第一天（安装svn管理工具跟tomcat插件）

    在eclipse中安装svn管理解压工具是有好几种方法. 方法1 1>可以直接下载svn插件subclipse,之后进行解压 2>然后将将插件包features和plugins目录中的文件 ...

  5. Xamarin大佬的地址

    https://www.cnblogs.com/hlx-blogs/p/7266098.html http://www.cnblogs.com/GuZhenYin/p/6971069.html

  6. POJ 1167 The Buses 暴搜+剪枝

    思路: 先把能选的路线都预处理出来 按照能停的车的多少排个序 (剪枝1) 搜搜搜 如果当前剩的车÷当前能停车的多少+deep>=ans剪掉 (剪枝2) //By SiriusRen #inclu ...

  7. POJ2823 单调队列

    POJ2823 http://poj.org/problem?id=2823 最基础的单调队列,说是数据结构,其实就是一种更新数组数据的方法. 之前还准备用deque,超时了,直接head,tail快 ...

  8. ZOJ 3175 Number of Containers 分块

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3216 乱搞的...watashi是分块做的...但我并不知道什么是分块...大 ...

  9. Java的位运算符——&0xFF的运算与讲解

    快放元旦假,没心思做啥的事,就去翻以前的代码遇到这句,但是又不懂,所以只好上网找,终于懂了那么一点点. 所以那个大神看到我说的有问题,请指出!谢谢.... 一:首先区分一下 A~F的意思先 A,代表十 ...

  10. 【Codeforces Round #425 (Div. 2) B】Petya and Exam

    [Link]:http://codeforces.com/contest/832/problem/B [Description] *能代替一个字符串(由坏字母组成); ?能代替单个字符(由好字母组成) ...