Vue指令中的v-bind之动态更改样式

{{}}不能在html属性中使用,我们要采用v-bind绑定属性。

语法:v-bind:属性名,可以简写为:属性名

每个绑定,都只能包含单个表达式。代码如下:

	<style>
		.yuan{
			width: 100px;
			height: 100px;
			border-radius: 50%;
                        background-color: green;
		}
		.red{
			background-color: red;
		}
	</style>    

<body>
    <div id="app">
   		<div  :class="if(true){return yuan}else{ruturn red}"></div>
    </div>
	<script>
			var vm=new Vue({
				el:'#app',
				data:{	
				},
				computed:{
					divClass:function(){
						return {yuan:true,red:false}
					}
				}
			})
	</script>

代码不会生效,控制台也不会报错。此时可以采用三元表达式。

正确代码如下:

	<style>
		.yuan{
			width: 100px;
			height: 100px;
			border-radius: 50%;
                        background-color: green;
		}
		.red{
			background-color: red;
		}
	</style>    

<body>
    <div id="app">
   		<div  :class="[isActive ? yuanClass : '', redClass]"></div>
    </div>
	<script>
			var vm=new Vue({
				el:'#app',
				data:{	
					isActive:true,
					yuanClass:'yuan',
					redClass:'red'
					
				}
			})
	</script>

 

表达式的结果可以是:1.字符串;2.对象;3.数组

基础使用代码如下:

   <div id="app">
    <!-- 	<a v-bind:href="href">百度</a> 简写为<a :href="href">百度</a>-->
   	<a :href="href">百度</a>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				href:"https://www.baidu.com/"
			}
			
		})
	</script>

 

v-bind动态更新样式的方法有:1.绑定class;2.绑定style

1.绑定class

代码如下:

	<style>
		.yuan{
			width: 100px;
			height: 100px;
			border-radius: 50%;
                        background-color: green;
		}
		.red{
			background-color: red;
		}
	</style>    

<body>
    <div id="app">
   		<div  :class="divClass"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
			},
			computed:{
				divClass:function(){
					return 'yuan red'
				}
			}
		})
	</script>

执行效果如下:

1.表达式的结果是对象。

通过改变对象键值,(true 或者false)来达到控制类的增加和删除。代码如下:

	<style>
		.yuan{
			width: 100px;
			height: 100px;
			border-radius: 50%;
                        background-color: green;
		}
		.red{
			background-color: red;
		}
	</style>    

<body>
    <div id="app">
   		<div  :class="divClass"></div>
    </div>
	<script>
			var vm=new Vue({
				el:'#app',
				data:{	
				},
				computed:{
					divClass:function(){
						return {yuan:true,red:false}
					}
				}
			})
	</script>

执行效果如下:

备注:v-bind:class指令可以和普通的class属性共存,如下代码:

 

2.表达式的结果是数组

代码如下:

	<style>
		.yuan{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: green;
		}
		.red{
			background-color: red;
		}
	</style>
</head>
<body>
   <div id="app">
   		<div  :class="[divClass,{height:height+'px'}]"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				height:300
			},
			computed:{
				divClass:function(){
					return {yuan:true,red:false}
				}
			}
		})
	</script>

执行效果如图:

2.绑定style

表达式的结果同class一样,可以是1.字符串;2.对象;3.数组

css属性可以采用驼峰式(camelCase)或者短横线分隔(kebab-case)命名,如果采用短横线分隔命名,必须要加上引号。

如果使用短横线分隔命名,不加引号,代码不会生效,如下代码:

	<style>
		.shape{
			width: 100px;
			height: 100px;
			background-color: green;
			border-radius: 50%;
		}
	</style>
<body>
   <div id="app">
   		<div  :style="{background-color:color,width:width+'px'}" class="shape"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				color:'blue',
				width:200
			}
		})
	</script>

正确的代码如下:

	<style>
		.shape{
			width: 100px;
			height: 100px;
			background-color: green;
			border-radius: 50%;
		}
	</style>
<body>
   <div id="app">
   		<div  :style="{'background-color':color,width:width+'px'}" class="shape"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				color:'blue',
				width:200
			}
		})
	</script>

执行效果如下:

1.表达式结果是对象

可以直接绑定一个样式对象,以便让模板更加清晰,代码如下:

	<style>
		.shape{
			width: 100px;
			height: 100px;
			background-color: green;
			border-radius: 50%;
		}
	</style>
<body>
   <div id="app">
   		<div  :style="styleClass" class="shape"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				styleClass:{
					'background-color':'blue',
					width:200
				}
			},

		})
	</script>

使用驼峰式命名则不需要加引号。

代码如下:

	<style>
		.shape{
			width: 100px;
			height: 100px;
			background-color: green;
			border-radius: 50%;
		}
	</style>
<body>
   <div id="app">
   		<div  :style="{backgroundColor:color,width:width+'px'}" class="shape"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				color:'blue',
				width:200
			}
		})
	</script>
</body>

代码执行效果如下:

2.表达式结果是数组

使用v-bind:style可以将多个样式对象应用到同一个元素上,代码如下:

	<style>
		.shape{
			width: 100px;
			height: 100px;
			background-color: green;
			border-radius: 50%;
		}
	</style>
<body>
   <div id="app">
   		<div  :style="[{backgroundColor:'blue'},{width:width+'px'}]" class="shape"></div>
   </div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{	
				width:200
			},

		})
	</script>

 

 

展开阅读全文

没有更多推荐了,返回首页