这个相对来说简单，看一遍代码就懂。

一、完整片段：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="js/vue.js"></script>

        <title>Class与Style绑定</title>

        <style type="text/css">

            .classA {

                /*红色字体*/

                color: red;

            }

            .classB {

                /*斜体*/

                font-style: italic;

            }

            .classC {

                /*蓝紫色字体*/

                color: blueviolet;

            }

            .classD {

                /*添加padding、margin*/

                margin: 5px;

                padding: 5px;

            }

            .classE {

                /*边框*/

                border: 1px solid saddlebrown;

            }

            .classF {

                /*背景色*/

                background-color: lightgoldenrodyellow;

            }

            .drTransform {

                transform: rotate(7deg);

                -ms-transform: rotate(7deg);

                /* IE 9 */

                -moz-transform: rotate(7deg);

                /* Firefox */

                -webkit-transform: rotate(7deg);

                /* Safari 和 Chrome */

                -o-transform: rotate(7deg);

                transition-duration: 5s;

            }

        </style>

    </head>

    <body>

        <h2>绑定Html Class</h2>

        <p>尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}"，但是不推荐这种写法和 v-bind:class 混用。两者只能选其一！</p>

        <div id="dr01">

            <h4>#对象语法</h4>

            <p>给v-bind:class一个对象，通过true、false动态切换class，isA为false，true，所以div的class为static、classB</p>

            <!-- 下面是两种方式，一种直接在v-bind:class里面展示对象，另外一种，在data里面添加classObj属性，在v-bind:class里面赋值classObj对象 -->

            <div v-bind:class="{static:isStatic,classA:isA,classB:isB}">1、对象语法class test</div>

            <div v-bind:class="classObj">2、对象语法another class attribute bind</div>

        </div>

        <hr />

        <div id="dr02">

            <h4>#数组语法</h4>

            <div v-bind:class='["classC","classD","classE","classF"]'>1、数组语法，直接添加"className"，不能动态更改，与class="classC classD classE classF"保持一致</div>

            <div v-bind:class='["classC","classD",isE?"classE":"","classF"]'>1、数组语法，直接添加"className"，里面使用了三元表达式</div>

            <div v-bind:class='[drClassC,drClassD,drClassE,drClassF]'>2、数组语法，数组的元素在data里面有定义，挨个赋值className</div>

            <div v-bind:class='[drClassC,drClassD,drClassE,isF?drClassF:""]'>3、数组语法，里面使用了三元表达式</div>

            <hr />

            <h4>#对象语法、数组语法混合使用</h4>

            <div>

                <p>在 1.0.19+ 中，可以在数组语法中使用对象语法：{{cHtml}}</p>

                <span>classA: data定义（三元表达式）, classB:直接引用（三元表达式），classC:data引用，classD：直接引用，EFGH是对象属性，所以不论属性名称是否有引号，只要属性值在data里面定义的是true，引用的都是属性名，false不引用</span>

                <div v-bind:class='[isA?drClassA:"",isB?"classB":"",drClassC,"classD",{"classE":isE,drClassF:isF,"classG":isG,drClassH:isH}]'>

                    class属性综合测试

                </div>

            </div>

        </div>

        <hr />

        <h2>绑定内联样式</h2>

        <div id="dr03">

            <h4>#对象语法</h4>

            <div v-bind:style="{color:activeColor,fontSize:activeFontSize}">1、对象语法简单测试</div>

            <div v-bind:style="styleObj">2、对象语法（在data下定义）</div>

        </div>

        <div id="dr04">

            <h4>#数组语法</h4>

            <div v-bind:style="[{color:'blue',fontSize:'15px'},{fontStyle:'italic',backgroundColor:'lightgoldenrodyellow'}]">2、数组语法简单测试</div>

            <div v-bind:style="[styleObj01,styleObj02]">2、数组语法简单测试</div>

        </div>

        <script>

            var dr01 = new Vue({

                el: "#dr01",

                data: {

                    isStatic: true,

                    isA: true,

                    isB: true,

                    classObj: {

                        static: true,

                        classA: true,

                        classB: true,

                    }

                }

            });

            var dr02 = new Vue({

                el: "#dr02",

                data: {

                    isA: true,

                    isB: true,

                    isE: true,

                    isF: true,

                    isG: true,

                    isH: true,

                    drClassA: "classA",

                    drClassB: "classB",

                    drClassC: "classC",

                    drClassD: "classD",

                    drClassE: "classE",

                    drClassF: "classF",

                    drClassG: "classG",

                    drClassH: "classH",

                    cHtml: '<div v-bind:class="[classA, { classB: isB, classC: isC }]">'

                }

            });

            var dr03 = new Vue({

                el: "#dr03",

                data: {

                    activeColor: "#ff0000",

                    activeFontSize: "20px",

                    styleObj: {

                        color: "red",

                        fontSize: "20px"

                    }

                }

            });

            var dr04 = new Vue({

                el: "#dr04",

                data: {

                    styleObj01: {

                        color: "blue",

                        fontSize: "15px"

                    },

                    styleObj02: {

                        fontStyle: "italic",

                        backgroundColor: "lightgoldenrodyellow"

                    }

                }

            });
　　　　</script>

    </body>

</html>

二、结果展示：

三、渲染后的html代码

Vue.js-----轻量高效的MVVM框架（六、Class与Style绑定）的更多相关文章

  1. Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）

    1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...

  2. Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  3. Vue.js-----轻量高效的MVVM框架（九、组件利用Props传递数据）

    #使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...

  4. Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. Vue.js-----轻量高效的MVVM框架（八、使用组件）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  6. Vue.js-----轻量高效的MVVM框架（五、计算属性）

    #基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...

  7. Vue.js-----轻量高效的MVVM框架（四、指令）

    Vue指令 指令 (Directives) 是特殊的带有前缀 v- 的特性.指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用.指令的职责就是当其表达式的值 ...

  8. Vue.js-----轻量高效的MVVM框架（三、认识数据绑定）

    插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...

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

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

随机推荐

  1. Gstreamer编程

    一.简介 GStreamer是一个开源的多媒体框架库.利用它,可以构建一系列的媒体处理模块,包括从简单的ogg播放功能到复杂的音频(混音)和视频(非线性编辑)的处理.应用程序可以透明的利用解码和过滤技 ...

  2. Luogu 1641 [SCOI2010]生成字符串

    结果和dp没有一点关系…… 30分算法:设$f_{i, j}$表示已经选了$i$个并且有$j$个是白色的状态数,转移显然,最后答案就是$f_{n + m, m}$,时间复杂度$O(n^{2})$. 1 ...

  3. 获取iframe自适应后的宽高

    1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...

  4. JavaWeb_增强for循环

    引入增强for循环的原因:在JDK5以前的版本中,遍历数组或集合中的元素,需要先获得数组的长度或集合的迭代器,比较麻烦. JDK5中定义了一种新的语法----增强for循环,以简化此类操作.增强for ...

  5. Java的post（HTTPS）请求-----接口测试

    package com.ju.util; import java.io.BufferedReader; import java.io.IOException; import java.io.Input ...

  6. [转载]Redhat Enterprise 6.1 如何使用免费的CentOS的yum源

    Redhat Enterprise 6.1 如何使用免费的CentOS的yum源 graybull posted @ 2013年2月18日 22:29 in Unix/Linux with tags  ...

  7. C#根据弹窗标题获取窗体句柄并模拟点击按钮（FindWindow，FindWindowEx，SendMessage）

    任务:将下面弹窗自动关闭 /// <summary> /// 找到窗口 /// </summary> /// <param name="lpClassName& ...

  8. MySQL的索引单表优化案例分析

    建表 建立本次优化案例中所需的数据库及数据表 CREATE DATABASE db0206; USE db0206; CREATE TABLE `db0206`.`article`( `id` INT ...

  9. GitHub下载代码到本地

    1.git  clone git@github.com:Sehunwy/test.git(加粗的是下载的地址) 2.下载完成,此时本地是这样的: 参考:https://blog.csdn.net/qq ...

  10. 关于nohup命令

    nohup java -jar Test.jar --server.port=443 > console.log 2>&1 & 关于nohup命令 when using t ...