黑马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. 日志实时收集之FileBeat+Kafka

    之前,我们的某一个业务用于实时日志收集处理的架构大概是这样的:   在日志的产生端(LogServer服务器),都部署了FlumeAgent,实时监控产生的日志,然后发送至Kafka.经过观察,每一个 ...

  2. Python 嵌套列表解析

    将一个3*4矩阵转为4*3矩阵Matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12],]afterMatrix = [[row[i] for ro ...

  3. Win8电脑更新出现错误代码80070003的解决方法

    有Win8系统用户在进行KB2894853更新时会碰到系统报错的问题,错误代码是80070003,那么在遇到这个问题的时候,我们该怎么去解决呢?下面好系统U盘启动就来告诉你相应的解决方法. Win8系 ...

  4. Phoenix安装批次提交插入更新语句

    1 贴一下官方的代码 https://phoenix.apache.org/tuning_guide.html try (Connection conn = DriverManager.getConn ...

  5. C# Winfrom GDI+ 自定义控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  6. Python---安装路径查看

    python是解释型脚本语言,在执行时,逐句解释执行,不需要进行预编译.但需要有自身的Python解释器.  所以在执行Python代码时,需要指定python解释器.  指定解释器方法: 在文件开头 ...

  7. SQL查询CASE遇上NULL怎么办？

    原SQL: case userName when  null THEN '空' else '有值' end, 这种写法不好使: 换一种:case when userName is null THEN ...

  8. MyBatis-07-分页

    7.分页 思考:为什么要分页? 减少数据的处理量 7.1.使用Limit分页 select * from user limit startIndex,pageSize 使用Mybatis实现分页,核心 ...

  9. linux安装libreOffice

    参考链接:https://qtdebug.com/mac-centos7-libreoffice/ https://blog.csdn.net/diyiday/article/details/7985 ...

  10. Java8-Stream-No.05

    import java.util.Arrays; import java.util.List; import java.util.function.Supplier; import java.util ...