<!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">

    <!-- 原生的class的写法 -->

    <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->

    <h2 :class="['thin', 'italic']">这是一个很大很大的H2，大到你无法想象！！！</h2>

    <!-- 第二种使用方式，在数组中使用三元表达式 -->

    <h3 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H3，大到你无法想象！！！</h3>

    <!-- 第三种使用方式，在数组中使用 对象来代替三元表达式，提高代码的可读性 -->

    <h4 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H4，大到你无法想象！！！</h4>

    <!-- 第四种使用方式，在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，

      所以 这里我没写引号；  属性的值 是一个标识符 -->

    <h5 :class="classObj">这是一个很大很大的H5，大到你无法想象！！！</h5>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: true,

        classObj: { red: true, thin: true, italic: true, active: true }

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue 设置class样式的更多相关文章

  1. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  2. vue设置全局样式变量 less

    1.第一步: npm install sass-resources-loader --save-dev 2.然后在build 的utils.js中exports.cssLoaders = functi ...

  3. 在vue中scss通过scoped属性设置局部变量如何设置框架样式

    应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...

  4. 02 uni-app框架学习：设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

  5. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  6. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  7. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  8. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  9. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

随机推荐

  1. KiCad 工程用 Git 管理需要忽略哪些文件？

    KiCAD 工程用 Git 管理需要忽略哪些文件? KiCAD 使用的 文本格式,天生可以用 Git 来管理. 但是并非所有文件需要使用 Git 管理,以下文件可以忽略. *.bak fp-info- ...

  2. 外贸电子商务网站之Prestashop修改顶部导航

    如修改以上所示顶部导航. 如何在prestashop顶部导航栏添加链接,Module>Top horizontal menu点击进入Configure页面 1,在Settings 中看到 链接 ...

  3. php怎么自动加载

    在 PHP 代码的顶部你是不是经常看到这样的代码. require 'lionis.php'; require 'is.php'; require 'cool.php'; 如果只是引入几个 PHP 脚 ...

  4. WordPress使用自定义文章类型实现任意模板的方法和怎么做邮件回复

    主要就是使用了register_post_type 函数. 1.创建插件目录 新建一个文件夹用来存放插件文件,这里我就命名这个文件夹为myMood 2.创php代码文件 在刚才创建的文件夹里面新建一个 ...

  5. SurfaceFlinger与Surface概述

    基本原理: SF一个Client对应一个app中的SurfaceComposerClient, 分别是Binder的n端和b端,主要用来CreateSurface 一个app中有多个Activity, ...

  6. Hdu 1867 KMP

    题目链接 题目意思: 给出两个字符串a, b, 求最长的公共字串c, c是a的后缀,也是b的前缀. 本题没有具体说明哪个字符串是文本串和匹配串, 所以都要考虑 思路: 查找的时候, 当文本串结束的时候 ...

  7. kendo grid 使用小结

    需要注意的: 1. id,如果没有指定id则会导致create.update等操作无法正常使用. 头疼事项: 1. 服务端失败返回error数据.如果是编辑状态,还不能友好提示错误.当然可以使用大量代 ...

  8. 【Leetcode链表】环形链表 II（142）

    题目 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos ...

  9. CTR+A组合键 以及终止按键事件传递

    Key UP 或Down 事件中 实现CTR+A全选 if ( Control.ModifierKeys==Keys.Control && e.KeyCode == Keys.A)   ...

  10. QT 建立信号和槽的联系（事件处理）

    Qt中事件处理机制叫做“信号”和“槽”signal &slot. 其模型为: 对象a中有一个信号signal:XXX(代表一个事件) 对象b中有一个槽slot:YYY(事件处理函数) 用con ...