Vue中class的使用总结如下：

使用形式v-bind:class  简写:class

1.在数组中使用一个class

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>VUE</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     color:'blue'
  24.                 },
  25.                 methods:{
  26.                 }
  27.             });
  28.         };
  29.     </script>
  30. </head>
  31. <body>
  32.     <div id="box">
  33.         <strong :class="[color]">文字...</strong>
  34.     </div>
  35. </body>
  36. </html>

描述：

1）

a) <strong :class="[color]">文字...</strong>

b) data:{
                 color:'blue'
     }

两者的color名称是对应一致的

2)

a) data:{
             color:'blue'
   },

b)
.blue{

            background: blue;

        }

两者的blue名称是对应一致的。

2.在数组中使用多个class

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     red:'red',
  24.                     b:'blue'
  25.                 },
  26.                 methods:{
  27.                 }
  28.             });
  29.         };
  30.     </script>
  31. </head>
  32. <body>
  33.     <div id="box">
  34.         <strong :class="[red,b]">文字...</strong>
  35.     </div>
  36. </body>
  37. </html>

描述：

原理和上述使用一个数组一样

3.使用对象形式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                 },
  24.                 methods:{
  25.                 }
  26.             });
  27.         };
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="box">
  32.         <strong :class="{red:true,blue:true}">文字...</strong>
  33.     </div>
  34. </body>
  35. </html>

描述：

使用对象的形势的时候，<strong :class="{red:true,blue:true}">文字...</strong>,其中的red,blue都是class的名字，

和数组形势的时候不一样。当为true的时候，显示对应的样式，为false的时候，隐藏对应的样式。现在都是true，

所以文字颜色是红色。背景是蓝色

4.使用对象形式。不同于上一个。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.         .red{
  11.             color: red;
  12.         }
  13.         .blue{
  14.             background: blue;
  15.         }
  16.     </style>
  17.     <script src="vue.js"></script>
  18.     <script>
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     a:true,
  24.                     b:false
  25.                 },
  26.                 methods:{
  27.                 }
  28.             });
  29.         };
  30.     </script>
  31. </head>
  32. <body>
  33.     <div id="box">
  34.         <strong :class="{red:a,blue:b}">文字...</strong>
  35.     </div>
  36. </body>
  37. </html>

描述：

和第三种不同的是，使用了a,b两个变量，然后在data中设置a,b的布尔值，从而实现class的显示和隐藏。true

显示，false隐藏。

Vue之class的用法的更多相关文章

  1. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  2. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  3. Vue插件编写、用法详解（附demo）

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  4. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  5. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

  6. Vue中的v-cloak用法

    v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...

  7. vue中keep-alive的用法

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...

  8. Vue watch的高级用法

    <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...

  9. Vue组件的基础用法（火柴）

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

  10. vue中$set的用法

    数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)

随机推荐

  1. WebAPI公开接口请求签名验证

    前言 现在的系统后端开发的时候,会公开很多API接口 对于要登录认证后才能访问的接口,这样的请求验证就由身份认证模块完成 但是也有些接口是对外公开的,没有身份认证的接口 我们怎么保证接口的请求是合法的 ...

  2. 解读XML - Foreach循环

    <foreach item="item" index="index" collection="supplyIdAry" open=&q ...

  3. CF1654E Arithmetic Operations 题解

    摘自我的洛谷博客. 题目让我们求改变数字的最少次数,那我们转化一下, 求可以保留最多的数字个数 \(cnt\),再用 \(n\) 减一下就行,即 \(res = n - cnt\). 我们先考虑两种暴 ...

  4. TrustZone——(一)

    本文内容主要来源于网络,综合了网上的多篇文章,也加入了一些自己的理解,重新组织了文章结构使其便于理解. 主要参考的文章包括: 一篇了解TrustZone TrustZone领域先行者 TrustZon ...

  5. C语言基础--数组详细说明

    目录 一.什么是数组 二.一维数组 1.一维数组创建 2.一维数组的使用 2.1 索引值 2.2 遍历数组 2.3 如何使用sizeof()计算出数组的长度 三.二维数组 1.二维数组的创建 2.二维 ...

  6. MAUI Blazor 显示本地图片的新思路

    前言 好久没写文章了,水一篇 关于MAUI Blazor 显示本地图片这个问题,有大佬发过了. 就是 token 大佬的那篇 Blazor Hybrid (Blazor混合开发)更好的读取本地图片 主 ...

  7. 初识C语言中的typedef、define以及Status

    小阿杰最近开始看数据结构啦嘿嘿嘿, 可惜小阿杰C语言功底稀薄,以此篇随笔记录一下我卑微的学习之路/苦涩/苦涩 首先define没啥好说的,在文件开头,定义一个固定不变的值. #define MAXN ...

  8. UG NX实现叉车运输货物功能遇见的问题

    在前一段时间编写模拟叉车运输功能时遇到,货物无法跟随的问题(如下动图) 后面发现是速度太快的原因导致货物没有跟着动,类似于抽桌布的感觉 解决办法有两种:第一种解决办法很简单就是把速度降低到不超过  2 ...

  9. STA学习笔记-0

    如今的逻辑设计复杂度和工作频率要求越来越高.为了保证设计稳定可靠,必须对设计附加时序约束,对综合实现结果进行时序分析. 导言 时序约束:主要用于规范设计的时序行为,表达设计者期望满足的时序条件,指导综 ...

  10. 转载【Linux中建立软raid】

    原文地址:https://www.cnblogs.com/diantong/p/10547081.html Linux内核中有一个md(multiple devices)模块在底层管理RAID设备,它 ...