Vue实现调节窗口大小时触发事件动态调节更新组

<template>
 <div class="example">
  <div class='myDiv' v-bind:style="{width: myWidth}"></div>
 </div>
</template>

<script>
 export default {
  // 其余的忽略不写了
  data () {
   return {
    myWidth: (window.innerWidth - 500) + 'px'
   }
  }
 }
</script>

<template>
 <div class="example">
  <div class='myDiv' v-bind:style="{width: myWidth}"></div>
 </div>
</template>

<script>
 export default {
  // 其余的忽略不写了
  data () {
   return {
    myWidth: (window.innerWidth - 500) + 'px'
   }
  },
  mounted () {
   // 注window.onresize只能在项目内触发1次
   window.onresize = function windowResize () {
    // 通过捕获系统的onresize事件触发我们需要执行的事件
    this.myWidth = (window.innerWidth - 500) + 'px';
   }
  }
 }
</script>