<!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. profile和bashrc四种的区别

    Linux下profile和bashrc四种的区别 12160阅读 0评论 /etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什 ...

  2. Laravel开发采坑系列问题

    2017年12月22日17:40:03 不定时更新 版本5.4.X 一下是可能会遇到的坑 1,必须的写路由转发才能访问控制器,当然你可以自动路由访问,但是需要些匹配规则,其实还是转发了 好多人讨论过自 ...

  3. python文件派生

    import time class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(self, item): # 没有的情况下 ...

  4. java的几种对象(PO,VO,DAO,BO,POJO，DTO)解释

    一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  5. MacOS High Sierra 引起 VirtualBox Vagrant 同步慢

    问题 最近把mac的操作系统升级到了最新版本发现了一个问题,通过共享文件夹的方式 修改的文件,无法立即同步到虚拟机中,大概需要30秒才能同步到共享文件夹. 操作环境如下 虚拟机:Virtualbox ...

  6. 如何在一个电脑上使用两个github账号

    问题描述:公司电脑上默认使用的是公司的github账号,如果希望写一些代码放到个人的github账号上,就需要配置让一个电脑上可以使用两个github账号 原理:管理两个SSH key 1.生成两个S ...

  7. 接口测试工具-Jmeter使用笔记（六：从文本读取参数）

    使用场景:测试一个接口并发处理数据的能力,并且每次请求传入的参数都要不同. 解决方法--- CSV Data Set Config 列举一个实例,步骤中会侧重读取参数操作的说明,其他有疑问的步骤请查阅 ...

  8. 点击当前选项显示当前内容jquery

    <script language="javascript"> $(document).ready(function(){ $(".moren a") ...

  9. 小程序 切换到tabBar页面不刷新问题

    小程序跳转的几种方式有wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab等.下面我们重点研究切换到tabBar的两种方式. wx.switchTa ...

  10. Python openpyxl、pandas操作Excel方法简介与具体实例

    本篇重点讲解windows系统下 Python3.5中第三方excel操作库-openpyxl: 其实Python第三方库有很多可以操作Excel,如:xlrd,xlwt,xlwings甚至注明的数据 ...