提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js v-bind动态绑定style对象语法

VueJS对象 动态 语法 绑定 bind Style
2023-09-27 14:22:47 时间 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-bind动态绑定style对象语法</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <h2 :style = "{key(属性名),value(属性值)}">{{message}}</h2> -->
			<!-- 50px必须加上单引号 否则就会当作变量去解析 -->
			<!-- <h2 :style = "{fontSize:'50px'}">{{message}}</h2> -->
			<h2 :style = "{fontSize:finalsize , color:finalcolor}">{{message}}</h2>
			<h2 :style = "getStyle()">{{message}}</h2>
			<h2 :style = "{fontSize:finalsizes+'px' , color:finalcolors}">{{message}}</h2>
			<h2 :style = "getStyles()">{{message}}</h2>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue",
					finalsize:"50px",
					finalsizes:100,
					finalcolor:'red',
					finalcolors:'blue'
				},
				methods:{
					getStyle:function() {
						return {fontSize:this.finalsize , color:this.finalcolor}
					},
					getStyles:function() {
						return {fontSize:this.finalsizes+'px' , color:this.finalcolors}
					}
				}
			});
		</script>
	</body>
</html>

样式展示

在这里插入图片描述

相关文章