{{}}不能在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>

 

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue