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(){ ...
随机推荐
- http的Content-Encoding和Content-Type及服务器和客户端处理流程
比如,A 给 B发送了一条信息:hello,首先,A要告诉B,我给你发的这条数据的类型,不同类型的数据,接收方的处理方式不一样,hello属于文本类型,所以Content-Type就要设置成 text ...
- JavaScript、ES6中类的this指向问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深入JavaScript之获取cookie以及删除cookie
cookie存在哪? 存在document.cookie中 ookie长啥样? cookie是一个字符串,长下面这样:“name=xxx; age=22;” 注意:分号后面有个空格,记住这一点,下面的 ...
- windows 10 自动升级后环境变量无效
上个礼拜放假的时候,win10提示需要升级,我当时随手就一点更新并关机...今天,在启动项目时候尴尬了: D:\project\js\iam-web\code\iam-web>npm run d ...
- python常用函数 V
vars(object) 返回对象object的属性和属性值的字典对象.不输入参数,就打印当前调用位置的属性和属性值,相当于locals()的功能. 例子:
- GDB学习笔记
GDB是UNIX及UNIX-like下的调试工具.GDB这个调试工具相比于VC.z的优点是具有修复网络断点以及恢复链接等功能. 一.功能 一般来说,GDB主要帮助你完成下面四个方面的功能: 1.启动你 ...
- 什么是shader?
一.什么是shader? shader是一段GLSL(openGL着色语言)小程序,运行在GPU(图形处理器),而非CPU使用GLSL语言编写,看上去像c或c++,但却是另外一种不同的语言.使用sha ...
- UIWebView和WKWebView一些琐事
WebViewJavascriptBridge 1.load加载 ,去本地查找html路径方式 NSString* htmlPath = [[NSBundle mainBundle] pathForR ...
- FTP错误 [ftp: connect: No route to host] 解决方法
问题: 昨天在局域网内的两台机器上用ftp命令传文件.因为是新机器所以没安装ftp. 分别在两台机器上安装了ftp的服务端和客户端,并启动了ftp服务器进程. 当用启动ftp连接另一台机器时发生了如下 ...
- action function
Action委托具有Action<T>.Action<T1,T2>.Action<T1,T2,T3>……Action<T1,……T16>多达16个的重载 ...