vuejs基础-style样式
在Vue中使用样式
使用class样式
数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
<!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>
使用内联样式
直接在元素上通过
:style的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
将样式对象，定义到
data中，并直接引用到:style中
在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
在
:style中通过数组，引用多个data上的样式对象
在data上定义样式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
<!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>
</head> <body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="styleObj1">这是一个h1</h1> --> <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
</body> </html>
vuejs基础-style样式的更多相关文章
- Android 基础一 TextView，Style样式，Activity 传值，选择CheckBox 显示密码
1.修改TextView字体 mTextView = (TextView) findViewById(R.id.textview1); mTextView.setText("I am her ...
- DOM Style样式对象的详细用法
DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head> ...
- JS学习之动态加载script和style样式
前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...
- 使用ueditor的时候，style样式传递到后台时被过滤没了
在项目中,使用ueditor的时候,style样式传递到后台时被过滤没了 转:https://www.cnblogs.com/theroad/p/5761743.html 经过chrome的一番调试后 ...
- 用正则表达式修改html字符串的所有div的style样式
最近项目中有一接口返回的一个字段是html格式的字符串,里边每个div中style的高度是固定的px,然后再手机端显示的时候发现,div中的内容重叠了:效果图如下: 对应的div如下: 由于高度固定, ...
- 【WPF】MVVM动态修改Bingding的另一种思路——用Style样式
问题场景: 界面上有个ListBox控件,它的内容Item绑定了一个列表,即 ItemsSource =”{Binding StudentList}”.这个StudentList列表在该界面View对 ...
- 5、Semantic-UI之基础按钮样式
5.1 基础按钮样式 在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript---动态加载script和style样式
一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点". 一个基本的网页格式 <!DOCT ...
随机推荐
- websocket无法注入bean问题解决方案
websocket服务端往往需要和服务层打交道,因此需要将服务层的一些bean注入到websocket实现类中使用,但是呢,websocket实现类虽然顶部加上了@Component注解,依然无法通过 ...
- 解析安装mysql
大多数人在结束咱们前面学习的基础知识的时候,其实一脸懵逼,不过我们已经开始步入了另一个新的高度,针对基础知识还是必须巩固针对性的进行补充,可以分模块总结:比如基础知识的数据结构---->函数-- ...
- Python单例模式的设计与实现【完美版】
目录 1. 按 2. 本文地址 3. 通过继承单例父类来实现 4. 使用装饰器实现 4.1. 懒汉式 4.2. 饿汉式 4.2.1. 未加锁版 4.2.2. 加锁版 1. 按 众所周知,对象是解决继承 ...
- postgres - 以单用户模式运行一个 PostgreSQL服务器
SYNOPSIS postgres [ -A 0 | 1] [ -B nbuffers] [ -c name=value] [ -d debug-level] [ --describe-config ...
- ElasticSearch基本概念阐述
下面阐述一下ES当中的一些常见词语含义: 集群 集群由一个或多个节点组成,对外提供服务,索引和搜索功能.在所有的节点中,一个集群有一个唯一的名称默认为“ElasticSearch”,此名称很重要,因为 ...
- [NOI2015]程序自动分析（并查集，离散化）
[NOI2015]程序自动分析 Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,-代表程序中出现的 ...
- 树形dp专栏
前言 自己树形dp太菜了,要重点搞 219D Choosing Capital for Treeland 终于自己做了一道不算那么毒瘤的换根dp 令 \(f[u]\) 表示以 \(u\) 为根,子树内 ...
- Selenium-WebDriverApi介绍
浏览器操作: #刷新 driver.refresh() from selenium import webdriver driver=webdriver.Chrome() driver.get('htt ...
- 按照MySQL
转载自:https://mp.weixin.qq.com/s?__biz=MzIwNzk0NjE1MQ==&mid=2247484200&idx=1&sn=6eed12242c ...
- R语言预测实战（第一章）
本例使用forecast包中自带的数据集wineind,它表示从1980年1月到1994年8月, 由葡萄酒生产商销售的容量不到1升的澳大利亚酒的总量.数据示意如下: #观察曲线簇 len=1993-1 ...