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. Java基础教程：tutorialspoint-spring mvc

    教程: 来自turorialspoint的Spring MVC 4.1.6教程(英文),官网:https://www.tutorialspoint.com/springmvc/index.htm 离线 ...

  2. CentOS 6.9使用sudo时出现：“...不在 sudoers 文件中，此事将被报告”的问题解决

    在终端切换root账号登录 su 修改/etc/sudoers文件 visudo 找到:root ALL=(ALL) ALL,修改成自己的账号: 保存即可,按Exc,输入”:wq!“,回车.

  3. 50套html站点模板，涵盖非常多行业，各种类型html站点，各种行业html站点模板下载

    50套html站点模板,涵盖非常多行业,各种类型html站点.各种行业html站点模板下载 所以模板都在共享文件中面QQ群 139639813 ,快下载吧.

  4. GIS+=地理信息+容器技术（1）——容器技术概述

    -------------------------------------------------------------------------------------- Blog:    http ...

  5. LeetCode 210. Course Schedule II(拓扑排序-求有向图中是否存在环)

    和LeetCode 207. Course Schedule(拓扑排序-求有向图中是否存在环)类似. 注意到.在for (auto p: prerequistites)中特判了输入中可能出现的平行边或 ...

  6. linux下的开源移动图像监测程序--motion编译与配置【转】

    本文转载自:http://www.cnblogs.com/qinyg/p/3355707.html 前几天在网上偶然看到一篇博客,是利用linxu下的开源的motion搭建嵌入式视频动态监控系统,感觉 ...

  7. poj--1664--放苹果（递归好体）

    放苹果 Time Limit: 1000MS   Memory Limit: 10000KB   64bit IO Format: %I64d & %I64u Submit Status De ...

  8. 用Webpack构建Vue项目

    开始之前,需要安装node环境.(安装过程在此就不啰嗦了)   1.创建基本结构 首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录. 创建一个没有任何依赖关系的pack ...

  9. POJ 1386 判断欧拉回路

    题意:要开启一扇门,n个单词是密码,n个单词中,如果一个单词的首字母和前一个单词的尾字母相同,并且每个单词都能这么连起来且只用一次,则门可以开启,否则不能开启,现给出单词,判断门是否可以开. 有向图欧 ...

  10. O - Masha and Bears

    Problem description A family consisting of father bear, mother bear and son bear owns three cars. Fa ...