9.绑定样式
div id="app">
<div :style="{color:red,fontSize:fontSize}"> div标签</div> 绑定样式
<div :style="styleObject"> div标签</div>绑定样式对象
<p :class="classA">p标签</p>绑定样式
<img :src="imgSrc">
</div >
<style type="text/css">
.classA{
color: red;
font-size: 50px;
}
.classB{
color: green;
font-size: 50px;
}
</style>
<script type="text/javascript">
var app = new Vue({
// 节点的id
el:'#app',
data:{
isLogin:false,
message:100,
fenshu:0,
fenshu2:12345123,
classA:'classA',
classB:'classB',
imgSrc:'https://www.baidu.com/img/fnj_96d95207b4a706738f1b8be3b41ea9f3.gif',
red:'red',
fontSize:'20px',
styleObject:{
color:"red",
fontSize:"20px"
}
}})
div id="app">
<div :style="{color:red,fontSize:fontSize}"> div标签</div> 绑定样式
<div :style="styleObject"> div标签</div>绑定样式对象
<p :class="classA">p标签</p>绑定样式
<img :src="imgSrc">
</div >
<style type="text/css">
.classA{
color: red;
font-size: 50px;
}
.classB{
color: green;
font-size: 50px;
}
</style>
<script type="text/javascript">
var app = new Vue({
// 节点的id
el:'#app',
data:{
isLogin:false,
message:100,
fenshu:0,
fenshu2:12345123,
classA:'classA',
classB:'classB',
imgSrc:'https://www.baidu.com/img/fnj_96d95207b4a706738f1b8be3b41ea9f3.gif',
red:'red',
fontSize:'20px',
styleObject:{
color:"red",
fontSize:"20px"
}
}})