<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="vue">
<div :style="{color:red,fontSize:size+'px'}">测试一</div>
<input type="number" v-model="size">
<div :style="div2">测试二</div> <!--可以用div2变量-->
<div :style="[div2]">测试三</div> <!--也可以写成数组的形式-->
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
red:"red",
size:28,
div2:{
color:'red',
background:'yellow',
width:'30%'
}
}
});
</script>
</html>效果:
