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. vue16 自定义键盘属性

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

  2. linux添加开机启动项的方法介绍

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下:chkconfig --list可能输出如下:openvpn 0:关闭 1:开启 ...... 6:关闭 ...

  3. js --- 中字符串与unicode编码

    1.charAt():把字符串分成每一个字符,从左往右提取指定位置的字符 var str = '天气'; alert( str.charAt(1) );            //气 2.charCo ...

  4. Gym - 100625D Destination Unknown 最短路

    http://codeforces.com/gym/100625/attachments/download/3213/2013-benelux-algorithm-programming-contes ...

  5. nodeType 节点的类型

    元素结点 1 属性结点 2 attributes 文本结点 3 注释结点   8 document结点 9 documentFragment 11 文档碎片

  6. 学习NLP:《自然语言处理原理与技术实现(罗刚)》PDF+代码

    自然语言处理技术已经深入我们的日常生活.我们经常用到的搜索引擎就用到了自然语言理解等自然语言处理技术.自然语言处理是一门交叉学科,涉及计算机.数学.语言学等领域的知识. <自然语言处理原理与技术 ...

  7. 破解root用户密码 -rwx权限

    破解root用户密码(本地登录) 1.光驱要放入系统光盘 2.重启os 3.修改启动菜单进入1运行级别 4.设置新密码 5.重启os linux的运行级别(默认3或5): 查看默认的运行级别 cat ...

  8. jQuery获取区间随机数

    1.自定义函数 function getRandom(min,max){    //x上限,y下限    var x = max;    var y = min;    if(x<y){     ...

  9. Swift学习笔记(5)--数组

    数组的下标从0开始计数,相关方法属性涉及到下标时也从0开始计数 1.定义: //1.可变数组 var cityArray = ["Portland","San Franc ...

  10. P2186 小Z的栈函数

    P2186 小Z的栈函数 题目描述 小Z最近发现了一个神奇的机器,这个机器的所有操作都是通过维护一个栈来完成的,它支持如下11个操作: NUM X:栈顶放入X. POP:抛弃栈顶元素. INV:将栈顶 ...