Отображение блока по условию v-if и v-else в зависимости от размеров окна? VUE JS

Question

Нужно, чтобы при максимальном расширении экрана в 600px, у меня происходило отображение другого элемента. Как реализовать подобное?

Answer 1

Подписываемся на событие resize и мониторим ширину окна:

var app = new Vue({
  el: '#app',
  data: () => ({
    small: false
  }),
  created() {
    window.addEventListener('resize', this.onResize);
    this.onResize();
  },
  destroyed() {
    window.removeEventListener('resize', this.onResize)
  },
  methods: {
    onResize() {
        this.small = window.innerWidth <= 600;
    }
  }
})

Привязываем v-if к переменной small:

<div id="app">
    <div v-if="small">
        <h3>Small div</h3>
    </div>
    <div v-else>
        <h2>Large div</h2>
    </div>
</div>

Answer 2

new Vue({
  el: '#app',
  data () {
     return{
      flag: true,
     }
  },
  created () {
    this.checkSize();
    window.addEventListener('resize', this.checkSize)
  },
  methods: {
    checkSize(){
      this.flag = innerWidth > 600
    }
  }
});

.app__item{
  width: 40px;
  height: 40px;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="flag" class="app__item red"></div>
  <div v-else class="app__item blue"></div>
</div>