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

一、总结

一句话总结：

这里就是为元素绑定class样式，和后面的style样式区别一下
vue中class样式绑定方式的相对于原方式的优势有可以使用三元表达式

1、vue中class样式绑定方式的相对于原方式的优势？

可以使用三元表达式：h1 :class="['thin', 'italic']"

h1 class="red thin"

2、vue中class样式绑定中 三元表达式及对象替代三元表达式？

h1 :class="['thin', 'italic', flag?'active':'']"
h1 :class="['thin', 'italic', {'active':flag} ]"

3、vue中class样式绑定中 以对象的方式绑定样式？

h1 :class="classObj"
classObj: { red: true, thin: true, italic: false, active: false }

二、内容在总结中

1、相关知识

使用class样式

  1. 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
  1. 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
  1. 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
  1. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

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>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

   <style>

     .red {

       color: red;

     }

     .thin {

       font-weight: 200;

     }

     .italic {

       font-style: italic;

     }

     .active {

       letter-spacing: 0.5em;

     }

   </style>

 </head>

 <body>

   <div id="app">

     <!-- <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

     <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->

     <!-- <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

     <!-- 在数组中使用三元表达式 -->

     <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

     <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->

     <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

     <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->

     <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         flag: true,

         classObj: { red: true, thin: true, italic: false, active: false }

       },

       methods: {}

     });

   </script>

 </body>

 </html>
 

黑马vue---16、vue中通过属性绑定为元素设置class类样式的更多相关文章

  1. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. Vue.js04：vue样式-通过属性绑定方式为元素设置class类样式

    <!-- 传统写法 --> <h1 class="red thin">这是一个h1标签</h1> <!-- 第一种使用方式,直接传递一个数 ...

  3. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  4. 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

  6. vue通过属性绑定为元素设置class样式

    第一种方式,直接传递一个数组,注意使用v-bind绑定             <h1 :class="['red','size'">这是一个h1文本</h1&g ...

  7. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  8. java 中利用反射机制获取和设置实体类的属性值

    摘要: 在java编程中,我们经常不知道传入自己方法中的实体类中到底有哪些方法,或者,我们需要根据用户传入的不同的属性来给对象设置不同的属性值,那么,java自带的反射机制可以很方便的达到这种目的,同 ...

  9. 2-4 Vue中的属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux下mysql不区分大小写设置

    Linux环境下的MySQL数据库的表名默认是区分大小写的 Windows环境下的MySQL数据库的表名默认是不区分大小写的 所以Linux下想mysql不区分下大写可以查看/etc/my.cnf文件 ...

  2. 【jekins】jenkins构建触发

    一.定时构建的语法 * * * * *(五颗星,中间用空格隔开)第一颗*表示分钟,取值0~59第二颗*表示小时,取值0~23第三颗*表示一个月的第几天,取值1~31第四颗*表示第几月,取值1~12第五 ...

  3. 第一章、接口规范之web-api接口

    1.什么是Web API接口 通过网络,规定了前后台信息交互规则的url链接,也就是前后台信息交互的媒介 Web API接口和一般的url链接还是有区别的,Web API接口简单概括有下面四大特点 u ...

  4. 简单介绍 Java 构造器

    导读 构造器是编程的强大组件.使用它们来释放 Java 的全部潜力. 在开源.跨平台编程领域,Java 无疑(?)是无可争议的重量级语言.尽管有许多伟大的跨平台框架,但很少有像 Java 那样统一和直 ...

  5. 封装Server类和Client类

    服务器端: EasyTcpServer.hpp #ifndef _EasyTcpServer_hpp_ #define _EasyTcpServer_hpp_ #ifdef _WIN32 #defin ...

  6. Kinect for windows的脸部识别

    需要引入的dll: 需要将下面两个dll复制到当前路径 Kinect for windows提供了脸部识别的功能,可以识出人脸.主要是通过FaceTrackFrame类的GetTriangles()来 ...

  7. python+Appium自动化：屏幕截图

    屏幕截图 主要是为了程序出现错误时,开发除了可以分析日志之外,还可以进行截图更好地去定位问题. 截图一般有两种方法: 第一种save_screenshot(self,filename) driver. ...

  8. 数字证书注册审批机构（RA）

    1.证书注册审批机构 RA(Registration Authority),数字证书注册审批机构.RA系统是CA的证书发放.管理的延伸.它负责证书申请者的信息录入.审核以及证书发放等工作:同时,对发放 ...

  9. Spring入门篇——第6章 Spring AOP的API介绍

    第6章 Spring AOP的API介绍 主要介绍Spring AOP中常用的API. 6-1 Spring AOP API的Pointcut.advice概念及应用 映射方法是sa开头的所有方法 如 ...

  10. zabbix4.0搭建

    一.准备工作 1.yum国内源的安装与更新 1.1 备份原repo文件 cd /etc/yum.repos.d/ mkdir repo_bak mv *.repo repo_bak 1.2 在cent ...