<!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. （2）网络基础之IP

    IP分为IPV4和IPV6. 以下只讲IPV4,IPV6后期会重新分出来 (以下均为个人理解,如果有误,欢迎提出.也希望如果转载,能通知我并注明转载信息,毕竟字也是我一个个码出来的.谢谢) IPV4地 ...

  2. 防火墙之iptables

    Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的完全自由的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入和流出服务 ...

  3. Linux C\C++基础 字符数组、字符串和字符串常量

    1.字符数组和字符串 C语言没有字符串类型,用字符数组模拟 字符串一定是字符数组,字符数组不一定是字符串 如果字符数组以字符'\0'('\0'等同与数字0)结尾,那么这个字符数组就是字符串 char ...

  4. Leetcode之动态规划（DP）专题-712. 两个字符串的最小ASCII删除和（Minimum ASCII Delete Sum for Two Strings）

    Leetcode之动态规划(DP)专题-712. 两个字符串的最小ASCII删除和(Minimum ASCII Delete Sum for Two Strings) 给定两个字符串s1, s2,找到 ...

  5. C语言中typedef，条件编译，结构体的说明

    目录 typedef (类型别名) 条件编译 条件编译在头文件包含中的应用 结构体 使用结构体定义新的结构体变量 结构体成员的引用与赋值 结构体指针及其引用 typedef (类型别名) typede ...

  6. C++游戏服务器编程笔记 IP详解

    C++游戏服务器编程笔记 IP详解 IP详解 INTERNET的历史 上世纪60年底起源于美国 1992年,Internet上的主机超过了100万台 现在已经是现代文明人的必需品    TCP/IP的 ...

  7. js执行多次事件，而非一次

    晚上查阅了很多文章,都是避免点击事件多次执行.反过来要是让事件多次执行该如何做? 这里可以配个setTimeout():来执行 这里我们用layui <link rel="styles ...

  8. 关于VUE 配置文件config详解内容

    // const path = require('path'); module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='produc ...

  9. 自动化测试_百度--糯米中--携程-出行<一>

    1:接下来我们看看思路  和相应的功能 使用python+selenium+unittest完成测试脚本 打开chrome浏览器,窗口最大化,设置等待时间10s 打开百度首页 鼠标移动到更多产品,点击 ...

  10. Redis安全策略

    1. 开启redis密码认证,并设置高复杂度密码 描述 redis在redis.conf配置文件中,设置配置项requirepass, 开户密码认证. redis因查询效率高,auth这种命令每秒能处 ...