<!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. Hadoop_Hbase集群完全离线安装[CDH 5.13.1]

    here 一.环境准备:(这儿准备了三台虚拟机:内存6-3-3) JDK: -openjdk rpm -e java--openjdk-headless rpm -e java--openjdk-he ...

  2. Python学习之认知（一）

    第二章(一) 2.1 python介绍 2.1.1 python是一种什么样的语言 ​ 编程语⾔主要从以下几个⻆度为进行分类,编译型和解释型.静态语言和动态语⾔.强类型定义语言和弱类型定义语言. 编译 ...

  3. Oracle 看出表结构与属性、表空间设计

    1.Oracle 查看表空间 SELECT b.comments as 注释, a.column_name as 列名, a.data_type || '(' || a.data_length || ...

  4. ubuntu服务器上用Nginx和Uwsgi部署django项目

    开发环境:ubuntu系统,python3环境 django项目目录: fast_foot 为项目根目录,app为项目应用 现在,我们登陆远程服务器 安装Nginx 安装好了,我们看一下nginx的配 ...

  5. 瀑布布局（waterflall flow）实现

    瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动.这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐 ...

  6. Elasticsearch-布尔类型

    boolean类型用于存储文档中的true/false.例如:专辑类型中需要添加一个字段表示是否可以下载,如下 curl -XPUT 'localhost:9200/music/album/4' -d ...

  7. PostgreSQL编码格式：客户端服务器、客户端、服务器端相关影响

    关于字符编码这块,官网链接: https://www.postgresql.org/docs/current/charset.html 刚刚写了几百字的东西因为断网,导致全没有了,重头再写,我就只想记 ...

  8. pycharm 更换源 Windows Linux平台

    pycharm 更换源 Windows Linux平台 参考资料:https://blog.csdn.net/wls666/article/details/95456309 Windows下更新源 文 ...

  9. P4942小凯的数字

    给定一个序列,如12345 56789 1011121314等,输出对其取余9的结果. 那么我们需要明白一个定理,一个序列对一个数的取余结果等于它各位之和取余那个数的结果.证明似乎是这样∑i=0n​a ...

  10. 2019年8月22日 星期四（怎样成为PHP大牛）

    1.服务器方面,各种PHP部署方案烂熟,Lvs,keepalived,nginx,apache,docker,换句话说其战力值相当于一个高级运维,迅速定位并排除PHP运行中的各种问题. 2.数据库方面 ...