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. $GPRMC解析

    http://blog.csdn.net/zccst/article/details/4235068 由于$GPRMC比较重要,所以重点讲解: $GPRMC(Recommended Minimum S ...

  2. vim编辑强制执行命令

    vim进入文件,输入i编辑好文件,按esc,输入冒号,再输入底下代码 :w !sudo tee %

  3. Meteor 前端 RESTful API 通过后端 API 下载文件

    Meteor 下载文件 问题场景 后端 HTTP server提供一个下载接口,可是须要前端 Meteor 可以给浏览器用户开一个URL来下载这个文件. 举例:在线的Meteor Logo文件就好比后 ...

  4. 【待解决】创建maven web工程报错

    报错信息如下: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 o ...

  5. 输入URL 一瞬间发生了什么

    当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,如有理解不正确或不足的地方希望大家指出.先上一张脑图: 还有个问题:www.baidu.com 键入后,域名怎么知道的是这个IP! 补 ...

  6. Java web測试分为6个部分

    1.功能測试 2.性能測试(包含负载/压力測试)3.用户界面測试 4. 兼容性測试 5.  安全測试  6.接口測试   1 功能測试 1.1 链接測试 链接測试可分为三个方面. 首先,測试全部链接是 ...

  7. python为在线漫画站点自制非官方API(未完待续)

    接下来将记录我一步一步写一个非官方API的过程,由于一些条件的约束,最后的成品可能非常粗暴简陋 如今介绍要准备的全部工具: 系统:ubuntu 14.04 语言:python 2.7 须要自行安装的库 ...

  8. pom.xml出现web.xml is missing and <failOnMissingWebXml> is set to true解决方案

    提示信息应该能看懂.也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了. 搜索了一下,Stack Overflow上的答案解决了问题,分享一下. ...

  9. subprocess学习

    转自http://blog.csdn.net/imzoer/article/details/8678029 subprocess的目的就是启动一个新的进程并且与之通信. subprocess模块中只定 ...

  10. Elasticsearch之cur查询索引

    前提, Elasticsearch之curl创建索引库 Elasticsearch之curl创建索引 Elasticsearch之curl创建索引库和索引时注意事项 Elasticsearch之cur ...