<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; margin: 0 auto; background: skyblue; } </style> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div class="div1" :style="styleStr" > <h1>helloworld</h1> </div> <hr /> <div class="div1" :style="styleObj" > <h1>helloworld</h1> </div> <hr /> <div class="div1" :style="{background:color}" > <h1>helloworld</h1> <button @click='changeColor'>更改颜色</button> </div> <hr /> <div class="div1" :style="{boxShadow:'0px 0px 50px '+color }" > <h1>helloworld</h1> <button @click='changeColor'>更改颜色</button> </div> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ styleStr:'color: #fff;', styleObj:{ background:'pink', fontSize:'50px', boxShadow:'0px 0px 30px #ccc' }, color:'purple' }, methods:{ changeColor:function(){ this.color = 'seagreen' } } }) </script> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
