vue.js style（核心）

最新推荐文章于 2023-05-01 11:24:11 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-05-01 11:24:11 发布

阅读量803

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_37805832/article/details/113850260

版权

vue.js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script type="text/javascript" src='vue.min.js'></script>
	<title></title>
	<style type="text/css">
		body{
			background-color: #ccc;
		}
	</style>
</head>
<body>
<input type="button" name="" id="" value="changed" @click="set"/>
<div :style="myDiv">
	
</div>
	<script type="text/javascript">
		new Vue({
			el:'body',
			data:{
				myDiv:{
				'width':'200px',
				'height':'200px',
				'background':'red',
				'transition':'.5s'
			}
		},
		methods:{
			set:function()
			{
				this.myDiv.width='400px';
				this.myDiv.height='400px';
				this.myDiv.background='green';
			}
		}
		});
	</script>
</body>
</html>

解释：

在这里插入图片描述
:style和:class差不多，但是只持json 数组字符串

效果：

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js style（核心）

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javasc
复制链接

扫一扫