黑马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. Spring Boot启动流程分析

    引言 早在15年的时候就开始用spring boot进行开发了,然而一直就只是用用,并没有深入去了解spring boot是以什么原理怎样工作的,说来也惭愧.今天让我们从spring boot启动开始 ...

  2. rpc框架画 和spring cloud流程图

  3. java web开发跨域问题

    分布式环境,前后端分离背景下跨域问题 1.1 设置页面document.domain去把2个页面之间的跨域交互统一 一级域名相同的情况下 调用者和页面提供者进行一个协调 页面提供者要在document ...

  4. R 读取xls/xlsx文件

    包readxl install.packages('readxl',repois='https://mirrors.utsc.edu.cn/CRAN/) library(readxl) # read_ ...

  5. ES7.x mapping 类型

    在将ES从2.3 升级到7.3版本的过程中,mapping是一个过不去的坎,很多类型都发生了变化 7.x常用数据类型:text.keyword.number.array.range.boolean.d ...

  6. tigervnc-server安装

    #vncserver安装方法 #su - root rpm -ivh tigervnc-server-1.8.0-13.el7.x86_64.rpm cp /lib/systemd/system/vn ...

  7. 《黑白团团队》第九次团队作业：Beta冲刺第三天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第一天 日期:2019/6/24 1.1 ...

  8. Linux文件系统之删除文件、文件夹（rm,rmdir）

    rm命令,rmdir命令 rm命令Remove,功能:1)删除目录,2)删除文件.  (可以递归的删除指定目录的所有文件及子目录) 注意:rm是一个危险的命令,使用的时候要特别当心,尤其对于初学者来说 ...

  9. binlog2sql闪回工具的使用

    binlog2sql闪回工具的使用 一.下载安装依赖的python yum install openssl-devel bzip2-devel expat-devel gdbm-devel readl ...

  10. CodeForces 839C - Journey | Codeforces Round #428 (Div. 2)

    起初误以为到每个叶子的概率一样于是.... /* CodeForces 839C - Journey [ DFS,期望 ] | Codeforces Round #428 (Div. 2) */ #i ...