v-bind绑定class和style

最新推荐文章于 2024-03-15 17:54:06 发布

hL？

最新推荐文章于 2024-03-15 17:54:06 发布

阅读量220

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/hL_dont/article/details/90378114

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码

<!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>

效果