Vue · 对css样式修改

方法一：

html:

 <div class="videoMa" ref="videoMa" style="width:100%;height:100%;">
 	<div id="playWnd" class="playWnd"  :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"></div>
 </div>

data:

 videoBox:{
       width:800,
       height:500,
     }

mounted中：

  mounted() {
      this.videoBox.width=this.$refs.videoMa.offsetWidth;
      this.videoBox.height=this.$refs.videoMa.offsetHeight;
 }

方法二：

<div id="vueFirst">
    <div :class="backColor">hello world</div>
    <hr>
    <input type="button" value="变黄" @click="changeColorToYellow"></input>
    <input type="button" value="变蓝" @click="changeColorToBlue"></input>
</div>
<script type="text/javascript">
export default {
       data: {
           backColor: "blueBack"
       },
       methods: {
           changeColorToYellow() {
               this.backColor = "yellowBack"
           },
           changeColorToBlue() {
               this.backColor = "blueBack"
           }
       }
    }
</script>
 <style>
 .blueBack {
     background-color: blue;
 }

 .yellowBack {
     background-color: yellow;
 }
</style>