Class绑定的对象语法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <script src="https://unpkg.com/vue"></script>
  7.     <style type="text/css">
  8.         .active {
  9.             width: 64px;
  10.             height: 64px;
  11.             background: blue;
  12.         }
  13.         .text-danger {
  14.             background: red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="app-1">
  20.         <div v-bind:class="{ active: isActive, textDanger: hasError }"></div>
  21.     </div>
  22.     <script type="text/javascript">
  23.         var vm1 = new Vue({
  24.             el: '#app-1',
  25.             data: {
  26.                 isActive: true,
  27.                 hasError: false
  28.             }
  29.         })
  30.     </script>
  31. </body>
  32. </html>

最基础样式绑定，是否使用样式由后面的布尔值决定

也可以绑定一个对象，这样看起来代码更清爽一些

  1. <div id="app-2">
  2.     <div v-bind:class="classObject"></div>
  3. </div>
  4. <script type="text/javascript">
  5.     var vm2 = new Vue({
  6.         el: '#app-2',
  7.         data: {
  8.             classObject: {
  9.                 active: true,
  10.                 'text-danger': true
  11.             }
  12.         }
  13.     })
  14. </script>

这两段代码中有个地方要特别注意一下，Bootstrap的text-danger属性分别使用了textDanger（驼峰式）和text-danger（串联式）的写法，这2种写法Vue都是支持的，唯一要注意的是使用串联式要加单引号

例如：font-size属性，在Vue里面可以写成fontSize（驼峰式）或'font-size'（串联式）

Class绑定的数组语法

  1. <div id="app-3">
  2.     <!-- 可以用三元表达式来选择性的渲染 -->
  3.     <div v-bind:class="[activeClass, hasError ? errorClass : '']"></div>
  4.     <!-- 也可以在数组语法中使用对象语法 -->
  5.     <div v-bind:class="[activeClass, { errorClass: hasError }]"></div>
  6. </div>
  7. <script type="text/javascript">
  8.     var vm3 = new Vue({
  9.         el: '#app-3',
  10.         data: {
  11.             hasError: true,
  12.             activeClass: 'active',
  13.             errorClass: 'text-danger'
  14.         }
  15.     })
  16. </script>

内联绑定的对象语法

  1. <div id="app-4">
  2.     <div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px' }">双子宫殿</div>
  3. </div>
  4. <script type="text/javascript">
  5.     var vm4 = new Vue({
  6.         el: '#app-4',
  7.         data: {
  8.             activeColor: 'red',
  9.             fontSize: 30
  10.         }
  11.     })
  12. </script>

同样内联绑定也可以绑定一个对象

  1. <div id="app-5">
  2.     <div v-bind:style="styleObject">Hello, TanSea!</div>
  3. </div>
  4. <script type="text/javascript">
  5.     var vm5 = new Vue({
  6.         el: '#app-5',
  7.         data: {
  8.             styleObject: {
  9.                 color: 'green',
  10.                 fontSize: '20px'
  11.             }
  12.         }
  13.     })
  14. </script>

内联绑定的数组语法

  1. <div id="app-6">
  2.     <div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div>
  3. </div>
  4. <script type="text/javascript">
  5.     var vm6 = new Vue({
  6.         el: '#app-6',
  7.         data: {
  8.             baseStyles: {
  9.                 color: 'blue',
  10.                 fontSize: '30px'
  11.             },
  12.             overridingStyles: {
  13.                 fontFamily: '微软雅黑'
  14.             }
  15.         }
  16.     })
  17. </script>

总体来说，样式绑定相对来说是比较简单的，只要记住语法格式就行了

Vue.js学习笔记 第二篇 样式绑定的更多相关文章

  1. Vue.js学习 Item6 -- Class 与 样式绑定

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此 ...

  2. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

  3. js学习笔记第二篇

    Js笔记整理 1.StringAPI a)        大小写转换:str.toUpperCase();str.toLowerCase(); b)        获取指定位置字符: Str[i]-- ...

  4. vue.js学习系列-第二篇

    一 VUE实例生命周期钩子     1 生命周期函数         定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数      1 new vue()      2 before ...

  5. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  6. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  7. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. Vue.js 学习笔记 第4章 v-bind 及 class与style绑定

    本篇目录: 4.1 了解v-bind指令 4.2 绑定class的几种方式 4.3 绑定内联样式 DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定cl ...

  9. Vue.js——学习笔记

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

随机推荐

  1. VC++通过API连接MySQL

    1.  首先安装MySQL数据库server,本文安装的是mysql-installer-community-5.6.10.1.msi这个版本号.至于各个版本号有什么不同,不在这里说明. 例如以下的默 ...

  2. Genymotion Android模拟器与fiddler 数据包拦截

    Genymotion: https://www.genymotion.com/fun-zone/ https://www.genymotion.com/account/create/ cls清空记录 ...

  3. Jmeter BeanShell 引用变量报错jmeter.util.BeanShellInterpreter: Error invoking bsh method: eval Parse error at line 14, column 181 : Error or number too big for integer

    如果你通过CSV Data Set Config或者_StringFromFile函数来参数化你的请求,需要特别注意当参数为纯数字时,jmeter会默认将其识别成int型数据,说明jmeter并不是默 ...

  4. httpclient 怎么带上登录成功后返回的cookie值访问下一页面

    我是只很菜很菜的小鸟.刚上班,有这个一个需求.要我抓取别的网站的数据.     我根据用户密码登录一个网站成功后,生成一个cookie值.我已经获取到了.然后要带上这个cookie值进行下一页面的访问 ...

  5. Android开发：《Gradle Recipes for Android》阅读笔记1.7——仓库配置

    repositories块告诉gradle哪里去寻找依赖,默认的android studio使用jcenter或者mavenCentral.jcenter仓库位于https://jcenter.bin ...

  6. 使用Nexus管理Maven仓库时，上传带依赖的第三方jar

    总所周知,使用Maven构建非常方便.在企业中使用Nexus创建私服来管理Maven时,需要上传很多没有开放源码的第三方Jar包.本文将讲述当第三方Jar包有很多并且互相有依赖时如何上传. 核心操作 ...

  7. Log4j将不同Package的日志输出到不同的文件

    转自:http://www.crazyant.net/1931.html 随着项目规模的越来越大,会不断的引入新的模块,不同的模块都会打印自己的日志,最后就造成日志根本没法查看,比如我自己的项目中,就 ...

  8. 巨蟒django之权限9:前端展示修改删除合并&&权限展示

    1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示

  9. event对象及各种事件

    事件(event) event对象 (1)什么是event对象? Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会 ...

  10. VCL控件组件大都应该重载TWinControl的虚函数WndProc来进行处理窗口消息的工作

    TWinControl的构造函数中会调用MakeObjectInstance并且传递MainWndProc作为窗口消息处理函数,而MainWndProc则会调用虚函数WndProc来处理窗口消息.留个 ...