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(){ ...
随机推荐
- k3 cloud成本调整单
做了成本调整单中的入库调整单或者出库调整单,进行入库成本核算和出库成本核算,做了入库调整单后在存货收发汇总表(按日期报表)中的收入部分会展示出来: 如果做的是期末余额成本调整,核算时会先删除手工新增的 ...
- 《图解HTTP》阅读总结
前言:<图解HTTP>是一本图文并茂的好书,讲解地很详尽.目前我只完整地读了一遍,很多地方知其然不知其所以然,接下来打算抽空再读一次.这篇博文只是做个粗略记录,第二遍读完会再来编辑细化. ...
- JSZip
/*! JSZip - A Javascript class for generating and reading zip files<http://stuartk.com/jszip> ...
- Spring Boot 全局排除 spring-boot-starter-logging 依赖
https://blog.csdn.net/u013314786/article/details/90412733 项目里使用了log4j2做日志处理,要排除掉Spring Boot 很多jar里边默 ...
- Express 中配置使用 art-template模板引擎
art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...
- python tkinter实时显示曲线
from tkinter import *from tkinter import ttkimport time#画窗口root = Tk()root.geometry('1000x500')root. ...
- vuex的mapState方法来获取vuex的state对象中属性
有两种写法 1.首先在组件中引入vuex的mapState方法: 首先在组件中引入vuex的mapState方法: import { mapState } from 'vuex' 然后在compute ...
- python学习笔记（八）函数return多个值，列表推导式和交换两个变量的值
函数return多个值: 补充知识点:写代码得到时候少用全局变量: 1.不安全 2.会一直占着内存不释放 函数多个return值,那么会把这几个return的值都放在一个元组里面,然后返回 def h ...
- 20180911-Java实例01
Java 实例 – 如何编译 Java 文件 本文我们演示如何编译 HelloWorld.java 文件,其中 Java 代码如下: public class HelloWorld { public ...
- js 通过浏览器直接打开应用程序（IOS，Android）
实现效果 如下图所示,在手机浏览器中访问京东的手机版网站(m.jd.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了京东App,则直接打开,如果没有安装,则开始下载. 实现方式 1. ...