vue 添加样式分几种方法
一.
<body>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
二.
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
三.
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>
</div> <script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})
四.
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div> <script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
五.
<style>
.text-danger {
width: 100px;
height: 100px;
background: red;
}
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div> <script>
new Vue({
el: '#app',
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
六. style内联样式
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div> <script>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
vue 添加样式分几种方法的更多相关文章
- react添加样式的四种方法
React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Linux添加系统调用的两种方法
前言 系统调用的基本原理 系统调用其实就是函数调用,只不过调用的是内核态的函数,但是我们知道,用户态是不能随意调用内核态的函数的,所以采用软中断的方式从用户态陷入到内核态.在内核中通过软中断0X80, ...
- js和jquery设置css样式的几种方法
一.js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...
- 给Repeater控件里添加序号的5种方法
Repeater是我们经常用的一个显示数据集的数据控件,经常我们希望在数据前显示数据的序号,那么我们该怎么为Repeater控件添加序号呢?下面编辑为大家介绍几种常用的为Repeater控件添加序号的 ...
- mysql 中添加索引的三种方法
原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...
- Vue 创建组件的两种方法
地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- delphi TreeView 从数据库添加节点的四种方法
方法一:delphi中递归算法构建treeView 过程:通过读取数据库中table1的数据,来构建一颗树.table1有两个字段:ID,preID,即当前结点标志和父结点标志.所以整个树的表示为父母 ...
- unity 改变鼠标样式的两种方法
1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...
随机推荐
- 本地文件夹上传到Github（一）
1.在要上传的文件夹下单击右键,选择Git Bash here打开Git bash,设置全局用户名和邮箱 语法:git config --global user.name wandou 语法:git ...
- IC设计流程介绍
芯片设计分为前端设计和后端设计,前端设计(也称逻辑设计)和后端设计(也称物理设计)并没有统一严格的界限,涉及到与工艺有关的设计就是后端设计. 1. 规格制定 芯片规格,也就像功能列表一样 ...
- Linux性能优化从入门到实战：16 文件系统篇：总结磁盘I/O指标/工具、问题定位和调优
(1)磁盘 I/O 性能指标 文件系统和磁盘 I/O 指标对应的工具 文件系统和磁盘 I/O 工具对应的指标 (2)磁盘 I/O 问题定位分析思路 (3)I/O 性能优化思路 Step 1:首先采用 ...
- 01基于python玩转人工智能最火框架之TensorFlow
课程主要内容 人工智能理论知识 开发工具介绍和环境配置 TensorFlow基础练习和应用实战 课程能学到什么? 人工智能知识点 Python库的使用 TensorFlow 框架使用和应用开发 适合人 ...
- rabbit localhost不能登录
解决方案 将C:\Users\{用户名}\.erlang.cookie 复制到 C:\Windows\System32\config\systemprofile 目录. 重启rabbitMQ服务 [转 ...
- mysql优化-覆盖索引查询,join
1 原始sql: SELECT a.* FROM event_data a WHERE a.receive_time >= '2018-03-28 00:00:00' AND a.receive ...
- bzoj2306 [Ctsc2011]幸福路径 倍增 Floyd
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2306 题解 倍增 Floyd. 令 \(f[i][j][k]\) 表示走了 \(2^i\) 步 ...
- macaca搭建
对于新鲜的事务总是那么好奇,在自动化的过程中,有幸了解到macaca,记录下安装过程,具体介绍请移步官网:https://github.com/macacajs/ python版本参考:https:/ ...
- randomForest R 学习笔记
object type randomForest 会根据变量的类型来决定regression或classification.class(iris$Species)是 factor,所以是classif ...
- OC中SEL，类别，继承，协议的使用
1.SEL SEL是selector的缩写,selector在OC中作用是定义一个方法变量,通过该方法变量来调用方法.我们在后面的UI中会经常用selector来调用事件方法.下面我将举两个例子来说明 ...