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(){ ...
随机推荐
- 2018-8-10-调试-ms-源代码
title author date CreateTime categories 调试 ms 源代码 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17:23: ...
- 浅谈协议（二）——视频流协议 [RTP/RTCP/RTMP/HTTP_FLV]
- python函数传参和返回值注意事项
函数传参 空参数 定义函数时括号里面没有形参,调用时不用传参. def func(): print('null para.') # 调用 func() 位置传参 规定形参的数量,调用时必须传递相同数量 ...
- CentOS7修改为国内yum源
备份源yum源 如果是国内下载的CentOS很可能国内YUM源已经设置好了. 备份/etc/yum.repos.d/下的*.repo文件. 在CentOS中配置使用网易和阿里的开源镜像 wget ht ...
- Typescript + TSLint + webpack 搭建 Typescript 的开发环境
(1)初始化项目 新建一个文件夹“client-side”,作为项目根目录,进入这个文件夹: 我们先使用 npm 初始化这个项目: 这时我们看到了在根目录下已经创建了一个 package.json 文 ...
- zabbix agentd错误日志解决办法
公司新上了一台服务器,我安装了zabbix_agents软件包,并复制了zabbix server端的zabbix_agentd.conf到/etc/zabbix里面并修改了相关的参数,并启动了zab ...
- 使用tinymce编辑器从word保持原格式复制粘贴的办法
官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...
- 《数据结构与算法(C语言版)》严蔚敏 | 第四章课本案例
//二叉树的顺序存储表示 #define MAXTSIZE 100 typedef TElemtype SqBiTree[MAXTSIZE]; SqBiTree bt; //二叉树的二叉链表存储表示 ...
- vue子组件获取父组件的数据
- read_ila
close all; clc; %clear; %点数 %point=40960; fft_point=200; show_point=200; end_point=1024; FS=30.72;%% ...