v-bind绑定class和style
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind绑定class和style</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<h2>v-bind动态控制class属性</h2>
<!--abc三种样式-->
<style type="text/css">
.a{
width: 60px;
height: 60px;
background-color: yellow;
}
.b{
width: 60px;
height: 60px;
background-color: blue;
}
.c{
width: 60px;
height: 60px;
background-color: green;
}
.default{
width: 60px;
height: 60px;
background-color: black;
}
</style>
<hr/>
<p>最原始的</p>
<div
class = "box0"
:class="one"
@click="ch"
>1</div>
<script type="text/javascript">
var p= new Vue({
el:".box0",
data:{
one:'a',
depend:1
},
methods:{
ch:function() {
if(this.depend==0){
this.one = 'a';
this.depend=1;
}
else if(this.depend==1){
this.one='b';
this.depend=2;
}
else if(this.depend==2){
this.one='c';
this.depend=0;
}
}
}
})
</script>
<hr/>
<p>对象语法，通过对象实现class的动态绑定</p>
<!--v-bind与class的第一种绑定-->
<div
class = "box1"
:class="{a:one,b:two,c:three}"
@click="ch"
>1</div>
<script type="text/javascript">
var p= new Vue({
el:".box1",
data:{
one:true,
two:false,
three:false,
depend:0
},
methods:{
ch:function() {
this.one=false;
this.two=false;
this.three=false;
if(this.depend==0){
this.one = true;
this.depend=1;
}
else if(this.depend==1){
this.two=true;
this.depend=2;
}
else if(this.depend==2){
this.three=true;
this.depend=0;
}
}
}
})
</script>
<!--v-bind与class的第二种绑定-->
<div
class="box2"
:class="mybox"
@click="ch"
>2</div>
<script type="text/javascript">
var p= new Vue({
el:".box2",
data:{
mybox:{
a:false,
b:true,
c:false
},
depend:0
},
methods:{
ch:function(){
this.mybox.a=false;
this.mybox.b=false;
this.mybox.c=false;
if(this.depend==0){
this.mybox.a = true;
this.depend=1;
}
else if(this.depend==1){
this.mybox.b=true;
this.depend=2;
}
else if(this.depend==2){
this.mybox.c=true;
this.depend=0;
}
}
}
})
</script>
<!--v-bind与class的第三种绑定-->
<div
class="box3"
:class="mybox"
@click="ch"
>3</div>
<script type="text/javascript">
var p= new Vue({
el:".box3",
data:{
a:false,
b:false,
c:false,
depend:0
},
computed:{
mybox:function(){
if(this.depend==0){
this.depend=1;
return{
a:true,
b:false,
c:false
}
}
else if(this.depend==1){
this.depend=2;
return{
a:false,
b:true,
c:false
}
}
else if(this.depend==2){
this.depend=0;
return{
a:false,
b:false,
c:true
}
}
}
},
methods:{
ch:function(){
this.depend+=1;
if(this.depend==3){
this.depend=0;
}
}
}
})
</script>
<hr/>
<p>这是数组语法，通过数组实现动态的绑定</p>
<!--v-bind与class的第一种绑定变式-->
<!--这里使用的是数组(列表)，不是对象了-->
<!--第一种正常的-->
<div
class="box4"
:class="[a,b,c]"
@click="ch"
>1</div>
<script type="text/javascript">
var p = new Vue({
el:".box4",
data:{
a:"a",
b:"",
c:"",
depend:0
},
methods:{
ch:function(){
if(this.depend==0){
this.a="";
this.b="b";
this.depend=1;
}
else if(this.depend==1){
this.b="";
this.c="c";
this.depend=2;
}
else if(this.depend==2){
this.a="a";
this.c="";
this.depend=0;
}
}
}
})
</script>
<!--第二种，使用了三元表达式-->
<div
class="box5"
:class="[c?'a':'b']"
@click="ch"
>2</div>
<script type="text/javascript">
var p= new Vue({
el:".box5",
data:{
c:true
},
methods:{
ch:function(){
this.c=!this.c;
}
}
})
</script>
<hr/>
<p>组件控制</p>
<!--......-->
<hr/>
<h2>v-bind 绑定 内联样式</h2>
<p>用对象连接vue和style</p>
<!--第一种形式-->
<div
class="box6"
:style="{ //变成了一个对象使用了
backgroundColor:col, //注意，js操作css都是驼峰命名法！！
width:w+'px',
height:h+'px'}"
>1</div>
<script type="text/javascript">
var p= new Vue({
el:".box6",
data:{
col:'red',
w:100,
h:100
}
})
</script>
<!--第二种形式-->
<!--自然就是把:style里面创建的匿名对象拿出来啦-->
<div
class="box7"
:style="styobj"
>2</div>
<script type="text/javascript">
var p= new Vue({
el:".box7",
data:{
styobj:{
backgroundColor:'yellow',
width:'100px',
height:'100px'
}
}
})
</script>
<hr/>
<p>通过数组绑定</p>
<div
class="box8"
:style="[la,lb]"
></div>
<script type="text/javascript">
var p = new Vue({
el:".box8",
data:{
la:{
backgroundColor:'red',
transform:'rotate(7deg)' /*自动添加前缀*/
},
lb:{
width:'100px',
height:'100px'
}
}
})
</script>
</body>
</html>
效果