一、style 可以使用对象
JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中 包括注释
声明一个对象：
var headerStyle={
backgroundColor:"red",
color:"green"
}将style对象进行引入{}不能丢失：
class Header extends React.Component{
render(){
return (<div>
<h1 style={headerStyle}>{this.props.title}</h1>
</div>)
}
}:style="对象" 同class的设置
:style="[内联样式对象1,内联样式对象2]"
eg:
第一种方法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello react</div>
data: {
activeColor: 'green',
fontSize: 30
}第二种方法：
<div v-bind:style="styleObject">hello react</div>
data: {
styleObject: {
color: 'green',
fontSize: '30px'
}
}第三种方法：
<div v-bind:style="[baseStyles, overridingStyles]">hello react</div>
data: {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}二、样式(class)
定义 随便建立一个common.css的样式表，写入
扫描二维码关注公众号，回复：
13592875 查看本文章
.sty1{
background-color: red;
color: white;
font-size: 40px;
}- 外部引入
import React from "react";
import {render} from "react-dom";
import './common.css';- 直接使用
class Footer extends React.Component{
render(){
return (<div>
<h3 className="sty1">{this.props.title}</h3>
</div>)
}
}:class="{red:flag}" flag为true red样式生效 否则不生效
:class=[flag:"class1":"class2"] class1和class2中均需要在data中声明
:class="对象" 对象为data中的属性名称 是一个对象 样式的操作就变成了对象的操作 利用数据自动渲染
eg:
样式写入：a{color:green} b{color:red}
第一种方法：
html部分：<span v-bind:class="{a:isexit}"
js部分：data:{isexit：true}第二种方法：
html部分：<span v-bind:class="inclass"></span> /<span v-bind:class="[inclass]"></span>
js部分：data:{inclass:"a"}第三种方法：
html部分：<span v-bind:class="[danger?iserror:issucess]""></span>
js部分：data:{
danger:true,
iserror:b,
issucess:a
}