vue 中使用class(样式)
<!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>
<!-- 使用class样式：
1、数组 直接传递一个数组，注意：这里的class需要使用 v-moddel 做数据绑定
2、数组中使用三元表达式
3、数组中嵌套对象 在数组中 使用对象替代三元表达式，提高代码可读性
4、直接使用对象
-->
</head>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em; /*//中文字间距 */
}
</style>
<body>
<div id="app">
<!-- 第一种：数组 直接传递一个数组，注意：这里的class需要使用 v-moddel 做数据绑定 -->
<h1 :class="['red', 'thin']">第一种：数组 了解</h1>
<!-- 第二种：数组中使用三元表达式 -->
<h1 :class="['red', flag? 'active':'']">第二种：数组中使用三元表达式</h1>
<!-- 第三种：数组中嵌套对象 在数组中 使用对象替代三元表达式，提高代码可读性-->
<h1 :class="['red', 'italic', {'active' : flag}]">第三种：数组中嵌套对象</h1>
<!-- 第四种：直接使用对象 在为class 使用 V-bind 绑定对象的时候，对象的属性是类名，
由于对象属性可带引号也可不带引号，所以这里没有写引号；属性的值 是一个标识符 -->
<!-- <h1 :class="{red:true, thin:true, italic:true, active:false}">第四种：直接使用对象</h1> -->
<h1 :class="classObj">第四种：直接使用对象</h1> <!-- <h1 class="red thin">this is a letter</h1> --> </div>
<script>
//创建Vue实例 得到ViewModel
var vm = new Vue({
el:"#app",
data:{
flag: true,//第二种：数组中使用三元表达式/第三种：数组中嵌套对象
classObj: {red:true, thin:true, italic:true, active:false},
},
methods:{}
})
</script>
</body>
</html>
vue 中使用class(样式)的更多相关文章
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
- vue中修改滚动条样式
这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...
- vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...
- Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...
- VUE中的style 样式处理的Scope （<style scope>）
在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...
- vue中v-bind绑定样式
近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...
- vue中定义多重样式
- 学习vue第五节，vue中使用class和style的css样式
vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
随机推荐
- [window] Pyhton轻便好用的spyder IDE如何去除E501 line too long提示
spyder 使用pep8作为代码规范的标准,默认单行长度是89个字符以内. 作为一个完美控,在使用spyer有的进行coding时,每当看到以下这个小小的warning时,心情都不是很爽: 89个字 ...
- PHP文件操作基本代码
PHP中提供了一系列的I/O函数,能简捷地实现我们所需要的功能,包括文件系统操作和目录操作(如“复制[copy]”).下面兄弟连PHP培训 小编给大家介绍的是基本的文件读写操作:(1)读文件 ;(2) ...
- 对SQL 优化，提升性能！
对SQL 进行优化能够有效提高SQL 语句的执行效率,降低系统资源开销,是开发者提高后端系统处理能力的首选方案. 新产品上线后,随着运营推广活动的开始,业务进入快速增长期,数据库作为后端系统唯一或者主 ...
- Linux内核设计与实现 总结笔记（第十一章）定时器和时间管理
时间管理在内核中占用非常重要的地位,内核中有大量的函数都需要基于时间驱动的,内核对相对时间和绝对时间都非常需要. 一.内核中的时间概念 内核必须在硬件的帮助下才能计算和管理时间,系统定时器以某种频率自 ...
- 可用来修改bean对象的BeanPostProcessor
可用来修改bean对象的BeanPostProcessor 11.1 简介 BeanPostProcessor是Spring中定义的一个接口,其与之前介绍的InitializingBean和Dispo ...
- luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra
题目链接 第一眼就是 $KDtree$ 优化建图然而,空间只有 $128mb$,开不下 时间不吃紧,考虑直接跑 $Dijkstra$ $Dijkstra$ 中存储的是起点到每个输入时给出的矩阵的最 ...
- Java——容器（泛型）
[泛型] 起因:JDK1.4之前类型不明确 <1>装入集合的类型都被当做Object对待,从而失去自己的实际类型. <2>从集合中取出时往往需要转型,效率低,且很容易出错 ...
- Linux 安装R包
https://www.cnblogs.com/jessepeng/p/10984983.html Linux 的R环境,可以通过anaconda jupyter notbook很容易的配置,见我之前 ...
- 启用和配置 FILESTREAM
2017/08/23 在开始使用 FILESTREAM 之前,必须在 SQL Server 数据库引擎实例中启用 FILESTREAM. 本主题说明了如何使用 SQL Server 配置管理器来启用 ...
- Parse error: syntax error, unexpected 'class' (T_CLASS)
电脑坏了重新下载代码. 结果报错 Parse error: syntax error, unexpected 'class' (T_CLASS), expecting identifier (T_ST ...