黑马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. 【php设计模式】组合模式

    定义: 是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式,它创建了对象组的树形结构. 应用场景: 部分.整体场景,如 ...

  2. json树迭代

    getArray(data){ for (var i in data) { if(data[i].disabled){ data[i].disabled = false } if(data[i].ch ...

  3. Spring Cloud（八）高可用的分布式配置中心 Spring Cloud Config

    在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config,它支持配 ...

  4. js实现复制 、剪切功能-clipboard.min.js 示例

    html: <div id="txt">我是要复制的内容</button> <button id="copyBtn">点击复 ...

  5. MinGW-W64 编译 LLVM 与 Clang

    原文: http://blog.csdn.net/happywjh666/article/details/51415723 编译环境: 系统 --win10 64位 gcc -- version 5. ...

  6. Systemd: Service File Examples

    大多数Linux发行版使用 systemd作为系统服务管理工具. systemctl是systemd的主要命令,用于管理控制服务. 这篇文章中将介绍如何创建允许你使用systemctl命令的sysyt ...

  7. Caffe---自带工具进行网络结构(xxx.prototxt)可视化

    Caffe---自带绘图工具(draw_net.py)绘制网络结构图(xxx.prototxt) 目录: 一,安装依赖库. 二,draw_net.py使用说明. 正文: 一,安装依赖库. 在绘制之前, ...

  8. C#Socket编程(一)简介

    一.TCP与UDP简介 https://blog.csdn.net/subin_iecas/article/details/80289513 二.单播.多播.广播 https://blog.csdn. ...

  9. C# 操作服务命令

    安装服务 @echo.服务启动...... @echo off @sc create 服务名称 binPath= " exe地址" @net start 服务名称 @sc conf ...

  10. MyBatis中#{}和${}的不同和${}的妙用(转)

        突然意识到sql语句的独特语义要和代码分离,我们就不能够在代码中写sql语句!!比如我要用${}在MyBatis的sql中拼接排序类型的时候,我就不能够在Java代码中直接写参数字符串为Ord ...