Class绑定的对象语法

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

    <style type="text/css">

        .active {

            width: 64px;

            height: 64px;

            background: blue;

        }

        .text-danger {

            background: red;

        }

    </style>

</head>

<body>

    <div id="app-1">

        <div v-bind:class="{ active: isActive, textDanger: hasError }"></div>

    </div>

    <script type="text/javascript">

        var vm1 = new Vue({

            el: '#app-1',

            data: {

                isActive: true,

                hasError: false

            }

        })

    </script>

</body>

</html>

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

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

<div id="app-2">

    <div v-bind:class="classObject"></div>

</div>

<script type="text/javascript">

    var vm2 = new Vue({

        el: '#app-2',

        data: {

            classObject: {

                active: true,

                'text-danger': true

            }

        }

    })

</script>

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

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

Class绑定的数组语法

<div id="app-3">

    <!-- 可以用三元表达式来选择性的渲染 -->

    <div v-bind:class="[activeClass, hasError ? errorClass : '']"></div>

    <!-- 也可以在数组语法中使用对象语法 -->

    <div v-bind:class="[activeClass, { errorClass: hasError }]"></div>

</div>

<script type="text/javascript">

    var vm3 = new Vue({

        el: '#app-3',

        data: {

            hasError: true,

            activeClass: 'active',

            errorClass: 'text-danger'

        }

    })

</script>

内联绑定的对象语法

<div id="app-4">

    <div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px' }">双子宫殿</div>

</div>

<script type="text/javascript">

    var vm4 = new Vue({

        el: '#app-4',

        data: {

            activeColor: 'red',

            fontSize: 30

        }

    })

</script>

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

<div id="app-5">

    <div v-bind:style="styleObject">Hello, TanSea!</div>

</div>

<script type="text/javascript">

    var vm5 = new Vue({

        el: '#app-5',

        data: {

            styleObject: {

                color: 'green',

                fontSize: '20px'

            }

        }

    })

</script>

内联绑定的数组语法

<div id="app-6">

    <div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div>

</div>

<script type="text/javascript">

    var vm6 = new Vue({

        el: '#app-6',

        data: {

            baseStyles: {

                color: 'blue',

                fontSize: '30px'

            },

            overridingStyles: {

                fontFamily: '微软雅黑'

            }

        }

    })

</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. 2015年天勤考研机试模拟赛 A 推断三角形

    [思路]:採用atoi转换长度.两边仅仅和大于第三边,两边之差小于第三边. [AC代码]: #include <iostream> #include <algorithm> # ...

  2. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  3. Android桌面小组件的使用

    一:建立一个类继承AppWidgetProvider 二:建立AWP的布局文件: 布局自己定义一个,但是在使用控件上是有要求的: 以上是Widget目前支持的控件. 三:编写AWP的信息文件:需要在r ...

  4. 多线程编程中的join函数

    # coding: utf-8 # 测试多线程中join的功能 import threading, time def doWaiting(): print 'start waiting1: ' + t ...

  5. css 使图片紧贴底部显示

    img{ display: table-cell; vertical-align: bottom; }

  6. 《从零开始学Swift》学习笔记（Day5）——我所知道的标识符和关键字

    Swift 2.0学习笔记(Day5)——我所知道的标识符和关键字   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和关键字,一直没有好好的总结,就是这样的用着,现在小小的整 ...

  7. after

    .pay-type_select-after, .amount-item_select-after { padding: 0; border: @wx-width-one_unit solid @co ...

  8. echarts系列之动态加载数据

    1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...

  9. Ubuntu部署jmeter

    一:ubuntu部署jdk 1:先下载jdk-8u74-linux-x64.tar.gz,上传到服务器,这里上传文件用到了ubuntu 下的 lrzsz. ubuntu下直接执行 sudo apt-g ...

  10. T-SQL利用笛卡尔积累计、累加

    T-SQL利用笛卡尔积累计.累加 笛卡尔积 --原始数据 select templateid,needitem1Count from db_tank..TS_CardMain --累计数据 selec ...