<!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. 使用 store 来优化 React 组件

    在使用 React 编写组件的时候,我们常常会碰到两个不同的组件之间需要共享状态情况,而通常的做法就是提升状态到父组件.但是这样做会有一个问题,就是尽管只有两个组件需要这个状态,但是因为把状态提到了父 ...

  2. ANN中乘积量化与多维倒排小结

    目前特征向量的比对加速优化能极大缩短比对耗时,改善用户体验. 优化的途径主要有两种,一是使用指令集(SSE,AVX)加速运算.二是使用ANN替代暴力搜索. 乘积量化和倒排索引组合是ANN中效果较好且实 ...

  3. bzoj3899 弦论

    好久没有更blog了啊... 对于一个给定长度为N的字符串,求它的第K小子串是什么. 这是一个SAM的模板题. 我好弱啊这个时候才开始学SAM,才会用指针. 要维护3个东西:每个状态right集合的大 ...

  4. Spring_通过Bean的Factory配置Bean

    package com.tanlei.bean.FactoryBean; import org.springframework.beans.factory.FactoryBean; public cl ...

  5. ELK之elasticsearch安装&&kibana安装

    1.ES和Kibana安装都是开箱即用的? 解压缩就可以用 elasticsearch解压缩之后,双击下图中的elasticsearch.bat,启动,kibana也是一样 双击之后, 我们看到上图有 ...

  6. Jmeter里面的时间单位

    1.线程组里面的时间单位为秒(s),如下图:

  7. Linux配置redis开机启动（CentOS 7）

    https://blog.csdn.net/qq_31803503/article/details/79246205 本次配置linux版本是CentOS 7 首先将  redis-3.2.3/uti ...

  8. linux驱动开发满三年，回首一下基本看不到其它选择

    刚刚搞完一个处理器BSP项目,准备搞下一个自研处理器.说不上来什么喜悦,仅仅有些许茫然.没有刚毕业时对这个行业的痴迷,慢慢认同这仅仅是个谋生工具的想法. 回忆当初编写第一个驱动,就像上了战场.被长官踢 ...

  9. Java练习 SDUT-1188_各位数字之和排序

    C语言实验--各位数字之和排序 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给定n个正整数,根据各位数字之和从小到大 ...

  10. 使用 Captcha 扩展包 为 Laravel 5 应用生成验证码

    http://laravelacademy.org/post/3910.html 1.安装 我们通过 Composer 安装 Captcha 扩展包: composer require mews/ca ...