vue.js style（核心）

贵哥的编程之路

发布于 2021-03-02 15:44:50

2.3K0

发布于 2021-03-02 15:44:50

<!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>