<!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. iOS开发——你真的会用SDWebImage？

    http://www.cocoachina.com/ios/20160503/16064.html 本文授权转载,作者:hosea_zhou(简书) SDWebImage作为目前最受欢迎的图片下载第三 ...

  2. python 对象的封装性

  3. getElementsByClassName兼容低版本浏览器

    var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ ...

  4. MVVM框架搭建

    以下是概要的目录结构,其中View,ViewModel,Model正代表的是MVVM的标识. View:页面window或者UserControl Model:数据模型对象 ViewModel:与Vi ...

  5. CC2540 / CC2541 竟然支持 Bluetooth BLE 5.0？

    CC2540 / CC2541 竟然支持 Bluetooth BLE 5.0? 无意中发现 CC2541 的 BLE 协议栈更新了. BLE-STACK is Bluetooth 5.0 qualif ...

  6. iOS图片折叠效果：Layer的contentsRect属性和渐变层

    http://www.cocoachina.com/ios/20150722/12622.html 作者:@吖了个峥 授权本站转载. 前言 此次文章,讲述的是Layer的一个属性contentsRec ...

  7. 2019-9-2-win10-uwp-打包第三方字体到应用

    title author date CreateTime categories win10 uwp 打包第三方字体到应用 lindexi 2019-09-02 12:57:38 +0800 2018- ...

  8. UVA_490:Rotating Sentences

    "R  Ie   n  te  h  iD  ne  kc  ,a   r  tt  he  es  r  eo  fn  oc  re  e   s  Ia   i  ad  m,  .  ...

  9. 阿里云数据库自研产品亮相国际顶级会议ICDE 推动云原生数据库成为行业标准

    4月9日,澳门当地时间下午4:00-5:30,阿里云在ICDE 2019举办了主题为“云时代的数据库”的专场分享研讨会. 本次专场研讨会由阿里巴巴集团副总裁.高级研究员,阿里云智能数据库产品事业部负责 ...

  10. 【Leetcode链表】合并两个有序链表（21）

    题目 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1-> ...