vue怎么绑定属性?

vue怎么绑定属性?下面本篇文章给大家简单介绍一下vue属性绑定。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

VUE属性绑定

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE绑定属性</title>
		<script src="js/vue.min.js"></script>
		<style>
			.bg{
				width:400px;height: 400px;
				background: #FF0000;
			}
			.text-danger{
				border: 1px solid #00f;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{bg:isBg,'text-danger':hasError}"></div>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					isBg:true,
					hasError:true
				}
			})
		</script>
	</body>
</html>

1.png

也可以以另外的格式:

2.png

3.png

我们知道在CSS中有行内样式,现在可以通过VUE内联样式来实现:

4.png

效果 如下:

5.png

前端代码:

6.png

也可以把{color:activeColor,fontSize:fontSize+'px'}变成一个样式对象styleObject,在VUE代码中对其进行设置:

7.png

继续升级,使用数组,将多个样式绑定到一个对象上:

8.png

9.png

更多前端开发知识,请查阅 HTML中文网 !!

以上就是vue怎么绑定属性?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏