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

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

08.vue中样式-class的更多相关文章

  1. vue_music:排行榜rank中top-list.vue中样式的实现:class

    排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...

  2. vue 中样式的绑定

    1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...

  3. vue学习(八) vue中样式 class 定义引用

    //style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:ita ...

  4. vue中样式的典型操作(:class,:style)

    <template> <div class="home-wrapper"> <div class="home-top">th ...

  5. 09.vue中样式-style

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【转】vue中样式被覆盖的问题，vue中的style不生效

    转载:http://www.cnblogs.com/shangjun6/p/11416054.html 在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们 ...

  7. vue中样式被覆盖的问题

    在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们的 外部样式放的位置不对 main.js 我们应该在 main.js 的开头引入样式,这样的话就不存在覆 ...

  8. Vue学习笔记七：Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  9. vue中动态样式不起作用？ scoped了解一下

    vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped

随机推荐

  1. CAutolock

    顾名思义CAutolock就是自动锁的意思,它可以把它之下的代码区锁住一直到其自身被释放掉    后这块代码区中的公共资源才会被其他线程使用.当然这个代码区能尽量少就尽量少,毕竟不能让其他线    程 ...

  2. URL传值乱码问题。（已解决)

    1. 问题描述 今天,我在写我的记账本的主界面,想在右上角加一个用户名提示,需要我把登陆界面的用户名传递给主界面,输入英文可以,输入汉字,发现显示在右上角的是乱码. 2. 解决办法 看这个乱码眼熟,我 ...

  3. LINUXJI积算器bc

    hling@hling:~$ bcbc 1.06.95Copyright 1991-1994, 1997, 1998, 2000, 2004, 2006 Free Software Foundatio ...

  4. 51nod图论题解（4级，5级算法题）

    51nod图论题解(4级,5级算法题) 1805 小树 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 她发现她的树的点上都有一个标号(从1到n),这些树都在空 ...

  5. vc调试不能入断点

    确保输出目录和中间目录在同一个文件夹:

  6. GIS常用知识列举

    GIS知识分类 我认为GIS知识,大体可分为以下三类. G——测量学.地图学.误差理论等基础——测绘方面 I——数据库.开发——IS方面 S——GIS原理——结合前面两种知识的理念 第一类,是基础,有 ...

  7. 洛谷P4324 扭动的回文串 [JSOI2016] manacher+哈希

    正解:manacher+哈希 解题报告: 传送门 要不要先解释下题意,,,我开始看了半天来着QAQ 大概就,要求一个最长的回文串 这个回文串有两种构成可能 一种是单从一个串中拿出来的连续一段 另一种是 ...

  8. （备忘）怎么去除WinRAR弹窗广告?

    1.在WinRAR的安装目录下新建一个记事本,命名为“rarreg.key”. 2.打开记事本,将一下内容复制进去. RAR registration data Federal Agency for ...

  9. dict()的另一种用法

    先了解两个内容: 定义字典的两种方法: d1 = { ‘name’ :‘zzl’} #方法一 d2 = dict( name = 'zzl' ) #方法二 2. __dict__()方法不记录类的属性 ...

  10. Py中查看数据类型【转载】

    转自:https://www.jianshu.com/p/bb5cc438e3b2 1.内置函数isinstance(object, (type1,type2...)) isinstance('con ...