<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></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="{red:true,thin:true,italic:false,active:false}">这是一个很大很大的H1，大到你无法想象！！！</h1>

        <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快速入门-- 15 vue中通过属性绑定为元素设置class类样式的更多相关文章

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

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

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

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

  3. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  4. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  5. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  6. vue 快速入门 系列 —— Vue 实例的初始化过程

    其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...

  7. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  8. vue 快速入门 系列 —— vue 的基础应用（下）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  9. vue 快速入门 系列 —— Vue(自身) 项目结构

    其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...

随机推荐

  1. 数据中心网络中的40GBASE-T

    数据中心网络基础设施正在见证由不断增长的带宽和网络性能需求推动的变革.10 千兆位以太网是当今数据中心的实际标准,而 40G 以太网的采用率越来越高.虽然 40G 以太网标准已存在于 SM 光纤和基于 ...

  2. python matplotlib 多图像排列显示

    用OpenCV和matplotlib实现多图排列,代码如下: import cv2 import matplotlib.pyplot as plt img = cv2.imread('C:\\User ...

  3. 必须要掌握的linux目录路径知识

    一./etc/sysconfig/network-scripts/ifcfg-en33    配置网络地址及GW等. 下面图片是一些常用的linux命令: nmtui(setup)---------- ...

  4. 上课笔记：awk

    awk [单独的编程语言解释器]1.awk介绍 全称:Aho Weinberger Kernaighan 三个人的首字母缩写:  1970年第一次出现在Unix机器上,后来在开源领域使用它: 所以,我 ...

  5. 学习shell的第三天

    编程原理:1.编程介绍 早期编程:  驱动 硬件默认是不能使用的:   不同的厂家硬件设备之间需要进行指令沟通,我们需要驱动程序来进行“翻译”:  更趋近与硬件开发的工程师,要学习“汇编语言”:而“汇 ...

  6. [转帖]PostgreSQL与MySQL比较 From 2010年

    PostgreSQL与MySQL比较 [复制链接]  http://bbs.chinaunix.net/thread-1688208-1-1.html osdba 稍有积蓄 好友 博客 消息 论坛徽章 ...

  7. [转帖]Windows 下如何配置Oracle ASM???

    Windows 下如何配置Oracle ASM??? candon123关注10人评论16725人阅读2011-02-09 21:40:57   本篇介绍了如何在windows下创建裸设备,并创建AS ...

  8. stm32F429启动时钟配置

    STM32f429在启动时会在startup_stm32f429_439xx.s中调用static void SetSysClock(void)函数.默认使用的是25M晶振,把系统时钟设置为180M. ...

  9. gson 带泛型的转换

    json转对象 public static <T> T json2Obj(String json, Class<T> cls) { Gson gson = new Gson() ...

  10. mac终端解决很多系统自带命令找不到问题

    node安装提示npm command not found 1.打开终端 2.输入命令如下: touch~/.bash_profile  (创建.bash_profile文件,-表示在-目录下,.表示 ...