vue零基础开发012——样式绑定
2019-11-19 本文已影响0人
文朝明
【第一种】class的对象绑定
<head>
<meta charset="utf-8" />
<title>样式绑定</title>
<script src="./vue.js"></script>
<style>
.activated{color:#ff0000;}
</style>
</head>
<body>
<div id="app">
<div :class="{activated:isActivated}" @click="handleDivClick">{{content}}
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
content:"出现吧，神龙！",
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated=true
}
}
})
</script>
</body>
</html>
初始化
点击后
【第二种】
<head>
<meta charset="utf-8" />
<title>样式绑定</title>
<script src="./vue.js"></script>
<style>
.activated{color:#ff0000;}
.activated-one{font-size:40px;}
</style>
</head>
<body>
<div id="app">
<div :class="[activated,activateone]" @click="handleDivClick">{{content}}</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
content:"进化吧，神龙！",
activated:"",
},
methods:{
handleDivClick:function(){
/*if(this.activated==="activated"){
this.activated=""
}else{
this.activated="activated"
}*/
//等同于
this.activated=this.activated==="activated"?"":"activated"
}
}
})
</script>
</body>
</html>
初始化
点击后
【第三种】内联样式绑定
<head>
<meta charset="utf-8" />
<title>样式绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div @click="handleDivClick" :style="objStyle">{{content}}</div>
<div @click="handleDivClick2" :style="[objStyle,{fontSize:'30px',fontWeight:'bold'}]">{{content2}}</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
content:"超进化，神龙！",
content2:"究极进化，神龙！",
objStyle:{ color:"black"}
},
methods:{
handleDivClick:function(){
this.objStyle.color=this.objStyle.color==="black"?"red":"black"
},
handleDivClick2:function(){
this.objStyle.color=this.objStyle.color==="black"?"green":"black"
}
}
})
</script>
</body>
</html>
初始化
点击超进化
然后点击任意
点击究极进化
