<!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. jquery parents() next() prev() 找父级别标签 找同级别标签

    html结构 解决方法: jquery parents()  找父级别标签 next() 同级别向下找 prev() 同级别想上找 我这里找的是一个,下面有n个的方法 $(document).read ...

  2. js中级小知识5

    元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1 ...

  3. Nginx负载均衡后端健康检查

    参考文档:https://www.cnblogs.com/kevingrace/p/6685698.html 本次使用第三方模块nginx_upstream_check_module的,要使用这个第三 ...

  4. Luogu 1098 - 字符串的展开 - [字符串操作][模拟]

    题目链接:https://www.luogu.org/problemnew/show/P1098 题目描述在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中 ...

  5. JSON.parse()和JSON.stringify()的解析与用途

    JSON.parse()和JSON.stringify()的解析与用途 1.parse用于从一个字符串中解析出json对象 如: var str = '{"name":" ...

  6. Python-----redis数据库

    # redis数据库:基于内存的高性能key-value数据库,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘上进行保存:#缺点:1.数据库容量受到物理内存的限制, ...

  7. .net 问题

    1.socket初始化三个步骤 2.多线程 3.mvc的理解

  8. css3之动画属性transform、transition、animation

    工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...

  9. 关于矩阵快速幂的用法总结QwQ

    umm首先矩阵快速幂的板子就不港了比较简单的还是?就结合二进制地理解一下就好了,代码可以翻蒟蒻の考前续命这里面放了我记得? 主要是说下应用趴? 目前我会的似乎就是个矩阵加速?简单来说就是个给一个递推式 ...

  10. 1、vue 笔记之 组件

    1.组件个人理解:  <组件>是页面的一部分,将界面切分成部分,每部分称为 <组件>   2.组件化思想:          //2.1.定义一个全局的组件,组件支持‘驼峰命名 ...