<!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. ConcurrentModificationException解决办法

    package test.my.chap0302; import java.util.ArrayList; import java.util.Iterator; import java.util.Li ...

  2. URL编程

    package com.tanlei.URL; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...

  3. 使用HashMap编写一程序实现存储某班级学生信息

    1. 使用HashMap编写一程序实现存储某班级学生信息,要求在屏幕上打印如下列表 学号   姓名   性别   年龄 001    张三   男      23 002    李四   男      ...

  4. 集合--List&&ArrayList-LinkedList

    1.8新特性  List接口中的replaceAll()方法,替换指定的元素,函数式接口编程 List  元素是有序的并且可以重复 四种add();方法 ArrayList(用于查询操作),底层是数组 ...

  5. 关于Apple Watch，听听开发了两个月Watch App的工程师怎么说

    今年1月份有幸应苹果邀请,秘密参与苹果 Watch App 的真机现场调试.4月份,Apple Watch 会正式上市.在这之前,也算是亲自抢先体验了 Apple Watch,以及开发了一下 Watc ...

  6. C# —— 枚举

    一.使用枚举的优点 枚举能够使代码更加的清晰,它允许使用描述性的名称表示整数值. 枚举使代码更易于维护,有助于确保给变量指定合法的.期望的值. 枚举使代码更易输入. 二.枚举说明 1.简单枚举 枚举使 ...

  7. Java实现接口用来弥补Java单继承的缺陷

    package com.test3;/** * @author qingfeng * 功能:继承类 VS 实现接口 :两者之间的关系(实现接口用来弥补Java单继承的缺陷) */public clas ...

  8. 安装pip3遇到：E: Unmet dependencies. Try 'apt-get -f install' with no packages (or specify a solution).

    安装pip3遇到:E: Unmet dependencies. Try 'apt-get -f install' with no packages (or specify a solution). 具 ...

  9. HDOJ1016 Prime Ring Problem（DFS深层理解）

      Prime Ring Problem                                                                       时间限制: 200 ...

  10. 从零学React Native之05混合开发

    本篇文章,我们主要讨论如何实现Android平台的混合开发. RN给Android端发送消息 首先打开Android Studio, Open工程, 在React Native项目目录下选择andro ...