1.绑定html css
1.1对象语法:
  传给 v-bind:class 一个对象,以动态地切换 class
  <div v-bind:class="{ active: isActive }"></div>
  上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值
1.2我们也可以在对象中传入更多属性用来动态切换多个 class,此外, v-bind:class 指令可以与普通的 class 属性共存
  <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  data: {
    isActive: true,
    hasError: false
   }
1.3你也可以直接绑定数据里的一个对象
  <div v-bind:class="classObject"></div>
  data: {
   classObject: {
    active: true,
    'text-danger': false
   }
  }
  <div v-bind:class="classObject"></div>
  data: {
    isActive: true,
    error: null
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
    }
  }

2.数组语法
2.1我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:
  <div v-bind:class="[activeClass, errorClass]">
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
渲染为:<div class="active text-danger"></div>
  2.2如果你也想根据条件切换列表中的 class ,可以用三元表达式:
  <div v-bind:class="[isActive ? activeClass : '', errorClass]">
  <div v-bind:class="[{ active: isActive }, errorClass]">

3.用在组件上
3.1.当你在一个定制的组件上用到 class 属性的时候,这些类将被添加到根元素上面,这个元素上已经存在的类不会被覆盖。
  Vue.component('my-component', {
    template: '<p class="foo bar">Hi</p>'
  })
然后在使用它的时候添加一些 class:
  <my-component class="baz boo"></my-component>
    HTML 最终将被渲染成为:
  <p class="foo bar baz boo">Hi</p>
3.2同样的适用于绑定 HTML class :
  <my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 true 的时候,HTML 将被渲染成为:
  <p class="foo bar active">Hi</p>

4.绑定内联样式:
4.1对象语法:v-bind:style 的对象语法十分直观——看着非常像 CSS ,其实它是一个 JavaScript 对象
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    data: {
    activeColor: 'red',
    fontSize: 30
  }
直接绑定到一个样式对象通常更好,让模板更清晰:
  div v-bind:style="styleObject"></div>
  data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
    }
  }

5.数组语法:
5.1.v-bind:style 的数组语法可以将多个样式对象应用到一个元素上:
  <div v-bind:style="[baseStyles, overridingStyles]">

vue - 绑定css、style的更多相关文章

  1. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  2. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  3. vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式

    created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...

  4. vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...

  5. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  6. vue引入css的两种方式

    方案1.在main.js中引入方式    import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入    @import &qu ...

  7. $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

    一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段 ...

  8. Vue中CSS模块化最佳实践

    Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...

  9. NO.04--我的使用心得之使用vue绑定class名

    今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...

随机推荐

  1. C语言中的常用函数_持续更新

    isspace函数: 背景:之前遇到scanf()输入时会把换行符留在输入队列的情况,如果下次要用到getchar(),但是会导致其先返回这个我们不需要的换行符:从而导致不希望出现的行为: 说明:检查 ...

  2. storm local logback

    <configuration> <property name="pattern" value="%d{yyyy-MM-dd HH:mm:ss.SSS} ...

  3. java中Excel导出

    转载:https://www.cnblogs.com/gudongcheng/p/8268909.html,稍加修改了 https://www.cnblogs.com/hanfeihanfei/p/7 ...

  4. java——数组栈 ArrayStack

    栈的应用: undo操作-编辑器 系统调用栈-操作系统 括号匹配-编译器 以下是动态数组实现的数组栈: 定义动态数组: package Date_pacage; public class Array& ...

  5. windows环境搭建禅道项目管理工具

    zentao官网的几个网址 http://www.zentao.net/ http://www.zentao.net/article-view-79863.html   搭建环境需要下载两个文件 1) ...

  6. ExtJS 开发总结

    1. ExtJS的定位是RIA,和Prototype.jQuery等类库的定位不同.使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype.jQuery等只是辅 ...

  7. SQL 还原或备份失败数据库变成单个用户模式无法访问

    还原数据失败了,数据库变成单个用户模式,无法操作了,执行下面的语句就可以了 USE master GO DECLARE @SQL VARCHAR(MAX); SET @SQL='' SELECT @S ...

  8. 30段有用的javascript代码

    1. 如何区分IE及非IE浏览器 if(!+[1,]){ console.log("这是IE浏览器"): } else{ console.log("这不是IE浏览器&qu ...

  9. [转]jQuery TextBox Water Mark with asp.net

    本文转自:http://naspinski.net/post/jQuery-TextBox-Water-Mark-with-aspnet.aspx I stole majority of this c ...

  10. opensuse13.2安装 sass和compass

    首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framewo ...