1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。

2、先来看一个简单的页面样式内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue样式</title>

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

    <style type="text/css">

        .red{

            color: red;

        }

        .thin{

            font-weight: bold;

        }

        .size{

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div id="app">

        <p class="red size">这是Vue样式示例</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{},

            methods:{}

        })

    </script>

</body>

</html>

里面简单的定义了三个样式类：red、thin、size；接下来我们通过v-bind实现同样的效果。

<p v-bind:class="redStr">这是Vue样式示例</p>

p标签里我们添加v-bind指令，class里的样式内容为Vue对象里data属性定义的“redStr”值。

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                redStr:'red size'

            },

            methods:{}

        })

    </script>

data里redStr的值为“red size”，所以运行效果是一样的。

3、看下个例子：

<body>

    <div id="app">

        <p v-bind:class="['red',flag?'size':'']">这是Vue样式示例</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{
　　　　　　　　　flag:true　
　　　　　　　},

            methods:{}

        })

    </script>

</body>

这里我感觉虽然用了v-bind指令，但是其没有从data里取数据，其直接把样式定义成了一个固定字符串数组，通过数组内容取对应的样式。其有一个特点就是可以读取三元表达式，根据三元表达式来控制样式是否进行展示。而且我们还可以对这个三元表达式进行简化，用对象的方式来达到同样的效果。代码如下：

<p v-bind:class="['red',{'size':flag}]">这是Vue样式示例</p>

4、下个例子：

<body>

    <div id="app">

        <p v-bind:class="classObj">这是Vue样式示例</p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                classObj:{'size':true,'red':true,'thin':true}

            },

            methods:{}

        })

    </script>

</body>

这里通过属性绑定了data对象数据classObj，其值为一个对象，通过true或者false来决定是否应用该样式，这样的代码比较简洁而且灵活度比较高。

5、以上几种方式都可以用来定义class样式，具体使用哪一种可以根据具体需求场景来应用。

每天进步一点点！

Vue学习之路第十一篇：为页面元素设置class类样式的更多相关文章

  1. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  2. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  3. Vue学习之路第七篇：跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  4. vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  5. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  6. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  7. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  8. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  9. Vue学习之路第五篇：v-bind

    v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...

随机推荐

  1. 0614MySQL的InnoDB索引原理详解

    转自http://www.cnblogs.com/shijingxiang/articles/4743324.html MySQL的InnoDB索引原理详解 http://www.admin10000 ...

  2. Python学习笔记13：标准库之子进程（subprocess包）

    ubprocess包主要功能是运行外部的命令和程序.从这个意义上来说,subprocess的功能与shell类似. subprocess以及经常使用的封装函数 当我们执行python的时候,我们都是在 ...

  3. JeeCG团队招聘啦！

    JeeCG团队招聘啦! 小团队攻坚,创业氛围浓厚.盼望有激情的你增加. 岗位描写叙述: 1,负责Jeecg.jeewx 微信管理系统相关的研发工作.2,高度參与整个产品设计.參与微信相关项目开发.3. ...

  4. mac 下作流程图工具omnigraffle

    omnigraffle:http://www.uzzf.com/soft/91710.html 含盖激活码: Name: mojado Serial: JYFE-JRJN-GSOT-GRAG-EVJI ...

  5. Squares-暴力枚举或者二分

    B - Squares Time Limit:3500MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit  ...

  6. JavaScript高级特性之原型

    JavaScript的原型 原型prototype属性仅仅适用于函数对象(这里的函数对象是自己为了理解更好定义的,普通对象是没有原型属性的) 1.研究函数原型: <script type=&qu ...

  7. 设备树学习之（一）GPIO中断【转】

    本文转载自:http://blog.csdn.net/lizuobin2/article/details/54563587 开发板:tiny4412SDK + S702 + 4GB Flash 要移植 ...

  8. js设计模式-享元模式

    享元模式实际上是一种优化模式,目的在于提高系统的性能和代码的效率. 使用享元模式的条件:最重要的条件是网页中必须使用了大量资源密集型对象,如果只会用到了少许这类对象,那么这种优化并不划算.第二个条件是 ...

  9. java基本数据类型（二）和分支结构

    基本数据类型(四类八种):不能为null一.整数型 byte----2的8次方 short----2的16次方 int----2的32次方 long----2的64次方二.浮点型 float----4 ...

  10. href 与 src

    href:常用有两个标签<a>和<link> 1.<a href="http://www.w3school.com.cn">W3School&l ...