<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind:style</title>
</head>
<body>
<div id="box" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">v-bind:style 样式的绑定</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
activeColor:'red',
fontSize:30
}
})
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind:style</title>
</head>
<body>
<div id="box" v-bind:style="styleObject">v-bind:style 样式的绑定 把style写成一个对象</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
styleObject:{
color:'blue',
fontSize:'30px'
}
}
})
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind:style</title>
</head>
<body>
<div id="box" v-bind:style="[baseStyles, overridingStyles]">v-bind:style 样式的绑定 把style写成数组</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
baseStyles:{
color:'red',
fontSize:'40px'
},
overridingStyles:{ //允许你将多个对象绑定进去，感觉就像class一样。
fontWeight:'bold',
textShadow:'5px 5px 10px #333' //有些css属性，例如transform，需要针对不同浏览器加不同前缀，这在vuejs里是自动添加的，无需考虑；
}
}
})
</script>
</html>
浙公网安备 33010602011771号