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 ...
随机推荐
- python 导入json模块的用法
json用于字符串,和 python数据类型间进行转换,json模块有四个功能,dumps,dump,loads,load. json 用法 json.dumps 将数据通过特殊的形式转换为所有程序语 ...
- mysql自动备份脚本
linux系统mysql5.6版本实现自动备份步骤 1.sudo mysql --help | grep my.cnf 查找my.cnf文件2.在文件中添加如下行实现免输入密码[mysqldump]u ...
- 开发chrome插件(扩展)
官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji ...
- C#学习——控件
Windows应用程序控件的基类是位于System.Windows.Forms命名空间的Control类. Control类定义了控件类的共同属性.方法和事件,其他的控件类都直接或间接到派生自这个类. ...
- 一gradle创建SSM项目——依赖包
build.gradle compile:编译时必须. runtime:运行时必须,包括编译时. testCompile:测试编译时必须. testRuntime:测试运行时必须,包括编译时. 注:此 ...
- java 判断点是否在一条线段上
public static void main(String[] args) { Scanner scan = new Scanner(System.in); Point point1 = new P ...
- log4j日志输出格式
%n- 换行 %m - 日志内容 %p - 日志级别(FATAL, ERROR, WARN, INFO, DEBUG or custom) %r - 程序启动到现在的毫秒数 %% - percent ...
- 线程池-连接池-JDBC实例-JDBC连接池技术
线程池和连接池 线程池的原理: 来看一下线程池究竟是怎么一回事?其实线程池的原理很简单,类似于操作系统中的缓冲区的概念,它的流程如下:先启动若干数量的线程,并让这些线程都处于睡眠状态,当客 ...
- gcc的-D,-w,-W,-Wall,-O3这些参数的意义
一.-D 其意义是添加宏定义,这个很有用. 当你想要通过宏控制你的程序,不必傻乎乎的在程序里定义,然后需要哪个版本,去修改宏. 只需要在执行gcc的时候,指定-D,后面跟宏的名称即可. 示例: gcc ...
- 【转载】Mysql注入点在limit关键字后面的利用方法
描写sql注入利用方法的文章数不胜数,本文将描述一种比较特殊的场景. 细节 在一次测试中,我碰到了一个sql注入的问题,在网上没有搜到解决办法,当时的注入点是在limit关键字后面,数据库是MyS ...