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

一、完整片段：

<!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. JS jquery ajax 已看1 有用

    4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择: ...

  2. 怎么把网页保存为pdf文件

    不就是用chrome浏览器打印功能,然后保存为pdf就可以了吗? 对于一些结构简单的比如,RFC文档这样操作一般没什么问题,对于一些有浮动元素的网页就不好说了,必须先用chrome的审查元素把一些不必 ...

  3. Luogu 2939 [USACO09FEB]改造路Revamping Trails && Luogu 4568 [JLOI2011]飞行路线

    双倍经验 写这两题之前被大佬剧透了呜呜呜. 分层图+最短路. 因为有$k$次机会能够把路径的费用变为$0$,我们可以建$k + 1$层图,对于每一层图我们把原来的边权和双向边连到上面去,而对于层与层之 ...

  4. Servlet入门第二天

    1. GenericServlet: 1). 是一个 Serlvet. 是 Servlet 接口和 ServletConfig 接口的实现类. 但是一个抽象类. 其中的 service 方法为抽象方法 ...

  5. web网站第一次加载慢的解决方法

    找到对应的应用程序池  将高级设置里的 闲置超时改为0

  6. Dev Envirenment - VS Code && C++ && MinGW

    1. 安装编译器 安装 MinGW-W64 添加系统环境变量 注意: 1)安装 MinGW 的时候要选择正确的 CPU 处理器类型 2)添加系统变量后需要重启电脑系统 2. 安装本文编辑器 安装 VS ...

  7. WebStorm设置Themes

    1.首先去 http://www.phpstorm-themes.com/  选择你喜欢的主题,保存对应主题的xml文件到你本地 2.打开C:\Users\Administrator\.WebStor ...

  8. GoogLeNet InceptionV2/V3/V4

    仅用作自己学习 这篇文章中我们会详细讲到Inception V2/V3/V4的发展历程以及它们的网络结构和亮点. GoogLeNet Inception V2        GoogLeNet Inc ...

  9. 软件测试就业必备知识点&自学软件测试-Dotest-2019

    软件测试就业必备知识点&自学测试&教学大纲-Dotest-2019

  10. TreeView —WPF—MVVM—HierarchicalDataTemplate

    摘要:采用HierarchicalDataTemplate数据模板和treeview在MVVM模式下实现行政区划树, 支持勾选.勾选父节点,子节点回全部自动勾选:子节点部分勾选时,父节点半勾选:子节点 ...