Vue - matchMedia

by ChangJoo Park

HTML

https://jsfiddle.net/changjoo_park/0nkc6mya/#fork
<div id="app">
  <h2>{{ text }}</h2>
  <hr> 아래는 onresize와 함께 동작합니다.
  <h2>{{ text2 }}</h2>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data() {
  	return {
    	text: '',
      text2: ''
    }
  },
  mounted() {
    if (matchMedia("screen and (min-width: 1024px)").matches) {
    	this.text = "현재 상태는 1024보다 같거나 큽니다."
    	this.text2 = "현재 상태는 1024보다 같거나 큽니다."
    } else {
      this.text = "현재 상태는 1024보다 작습니다."
      this.text2 = "현재 상태는 1024보다 작습니다."
    }
    
    window.onresize = () => {
      if (matchMedia("screen and (min-width: 1024px)").matches) {
        this.text2 = "현재 상태는 1024보다 같거나 큽니다."
      } else {
        this.text2 = "현재 상태는 1024보다 작습니다."
      }
    }
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})