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. Android导入工程提示Invalid project description

    在eclipse里导入的时候报错,提示 Invalid project description. 解决的方法: 在eclipse的workspace中,找到.metadata目录,依次打开------ ...

  2. URAL 1823. Ideal Gas（数学啊 ）

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1823 1823. Ideal Gas Time limit: 0.5 second Me ...

  3. Windows系统时间同步出错解决办法（w32tm /register按回车，可能是为了解决时间COM注册的问题）

    有时候我们设置本地时间与Internet时间同步时,经常连接服务器time.windows.com超时,导致时间同步失败,解决办法如下: 利用快捷键"Win+R"调出运行框,输入: ...

  4. 浏览器下载img标签Base64图片

    https://blog.csdn.net/qq_42076140/article/details/82113622    原文地址 <a href="javascript:downl ...

  5. poj--2007--Scrambled Polygon(数学几何基础)

    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Su ...

  6. oracle之dbms_output

    oracle的dbms_output oracle的dbms_output的两个小问题 .如果dbms_output.put_line的内容不能显示,需要在命令行中先敲入set serveroutpu ...

  7. 织梦DedeCMS判断简略标题为空时则显示完整标题

    使用织梦DedeCMS系统程序开发网站中,我们会遇到很多因网页版面设计限定的宽度,使文章标题需要进行字数限制,通常做法是在a标签中加入一个title属性,让鼠标放上去的时候显示完整标题.但是标题被剪裁 ...

  8. 使用form-create动态生成vue组件

    使用form-create动态生成vue自定义组件和嵌套表单组件 [github] | [说明文档] 示例 let rule = [ { type:'row', children:[ { type:' ...

  9. PXE无人值守部署centos7.4操作系统

    1.基础环境: 镜像ISO文件名为:CentOS-7-x86_64-DVD-1804.iso 2.安装需要的软件包 yum install dhcp xinetd syslinux httpd tft ...

  10. 数据持久化－存取方式总结&应用沙盒&文件管理NSFileManager

    iOS应用数据存储的常用方式:  1.XML属性列表   (plist归档)  2.NSUserDefaults (偏好设置)  3.NSKeyedArchiver  归档(加密形式)  4.SQLi ...