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. hdu 3072 强连通+缩点+最小树形图思想

    #include<stdio.h> #include<string.h> #define N 51000 #define inf 1000000000 struct node ...

  2. magento 在全站或者某页面增加外联js或者css的方法

    1,在整站末尾增加外联资源 找到当前主题的布局文件cms.xml,在<default></default>添加如下代码: <reference name="be ...

  3. CGLib与JDK的动态代理

    一.CGLib 简单介绍 CGLib (Code Generation Library) 是一个强大的,高性能,高质量的Code生成类库. 它能够在执行期扩展Java类与实现Java接口. Hiber ...

  4. HDU 3644

    模拟退火算法.... 这道题,呃.我怎么感觉他就是随机的.同一个代码,时而AC,时而WA.其实还真的是随机的.呵呵呵呵呵...因为下降火太快了,没办法,而降得慢又会...TLE,虽然精度提高了. 敢问 ...

  5. JAVAEE之-----MySQL分页技术（带搜索）

    需求: 为什么须要採用分页技术呢?在数据库中我们查询数据的时候,须要将数据返回到显示页面.数据库中含有大量数据,所有显示在一个页面过于太多,所以我们须要採用分页技术.每一页显示不同数据. 主要解决这个 ...

  6. 2016.04.07,英语,《Vocabulary Builder》Unit 11

    cant, from the Latin verbs canere and cantare, meaning 'sing'. by way of French, add an h to the roo ...

  7. SQL注入原理解析以及举例1

    sql注入是指web应用程序对用户输入数据的合法性没有判断,导致攻击者可以构造不同的sql语句来实现对数据库的操作. sql注入漏洞产生满足条件: 1:用户能够控制数据的输入. 2:原本需要执行的代码 ...

  8. jupyter在特定环境特定目录中启动

    代码如下: @echo off start %windir%\System32\cmd.exe "/c" D:\Anaconda\Scripts\activate.bat # 启动 ...

  9. 数据科学的完整学习路径（Python版）

    转载自:http://python.jobbole.com/80981/ 英文(原文)连接:https://www.analyticsvidhya.com/learning-paths-data-sc ...

  10. IO流读取文件内容时，出现空格的问题（未找到原因）

    import java.io.File; import java.io.FileReader; import java.io.FileWriter; import java.io.IOExceptio ...