vue的style动态绑定

最新推荐文章于 2024-03-17 12:22:11 发布

前端小白_zqx

最新推荐文章于 2024-03-17 12:22:11 发布

阅读量479

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59405322/article/details/130523623

版权

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	
	<body>
		<div id="app">
			<p>当前的时间:{{getCurrentTime()}}</p>
			<!-- 能够储存 -->
			<p>计算属性{{getCurrentTime1}}</p>


			<div :style={width:MyWidth+'px',height:MyHeight+'px',"background-color":"red"}></div>
			<div :style="`width: ${MyWidth}%;height:${MyHeight+'px'};background-color:black`"></div>
			<div :style="`width: ${100/MyWidth}%;height:${100/MyHeight}%;background-color:yellow`">1234</div>
			<div :style="[obj2,styObj]"></div>
		</div>
		<!--   -->
	</body>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				MyHeight:100,
				MyWidth:80,
				obj2:{
					fontSize:'20px',
					width:50+'px',
					height:50+'px',
					backgroundColor:'red'
				},
			},
			

			created() {
				
			},
			methods:{
				
				getCurrentTime(){
					return Date.now()
				}
			},
			computed:{
				styObj(){
					return {
						width:this.MyWidth+'px',
						height:this.MyHeight+'px',
						backgroundColor:'green'
					}
				},
				getCurrentTime1(){
					return Date.now()
				}
			}
		})
	</script>
</html>