v-bind动态绑定style

v-bind动态绑定stylev-bind动态绑定style（对象方式）v-bind动态绑定style（数组方式）v-bind动态绑定style（对象方式） v-bind可以动态绑定style的属性，格式为：style="{key(属性名):value(属性值)}，此处要注意属性值是否带引号，带引号时为字符串，不带引号时vue会认为它是一个变量。代码介绍，通过修改vue中的data中的值来动

追星星の人

5204人浏览 · 2020-06-14 13:11:40

追星星の人 · 2020-06-14 13:11:40 发布

v-bind动态绑定style

v-bind动态绑定style（对象方式）
v-bind动态绑定style（数组方式）

v-bind动态绑定style（对象方式）

v-bind可以动态绑定style的属性，格式为：style="{key(属性名):value(属性值)}，此处要注意属性值是否带引号，带引号时为字符串，不带引号时vue会认为它是一个变量。
代码介绍，通过修改vue中的data中的值来动态修改页面要显示的字的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<!-- 动态绑定style格式： style="{key(属性名):value(属性值)}" -->
	<h2 class="title"  :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				message:'hello,vue!',
				finalSize:50,
				finalColor:'red'				
			}
		})
</script>
</body>
</html>

v-bind动态绑定style（数组方式）

v-bind使用数组方式动态绑定style使用较少，用法为：先在vue实例data部分写好要使用的样式，然后在要使用v-bind动态绑定之处使用数组绑定，数组中包括vue中已定义好的样式名。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
	<!-- 动态绑定style格式： style="{key(属性名):value(属性值)}" -->
	<h2 class="title"  :style="[style1,style2]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				message:'hello,vue!',
				style1:{fontSize:'50px'},
				style2:{color:'red'	}			
			}
		})
</script>
</body>
</html>

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}$/, //不连续的两位字母// /^