Vue js动态显示/隐藏div

Question

我有两个div：

<div class = "bigger">
</div>
<div class = "smaller">
</div>

如果屏幕宽度<710和

反之亦然。我可以通过以下方式触发调整大小事件：

mounted() {
window.addEventListener("resize", this.displayWindowSize)
})
},
methods () {
displayWindowSize(event) {
if(document.documentElement.clientWidth > 710){
//hide smaller div
console.log("bigger");
}else{
//hide bigger div
console.log("smaller");
}
}
}

但我在互联网上找不到如何在vuejs中隐藏div。

你们有主意吗？

编辑：每当屏幕宽度改变时，我想触发这个函数来隐藏div，而不仅仅是一次。

Answer 1

这取决于你是否想隐藏它删除它，如果你想删除你可以做一些类似的事情

methods () {
isBigger() {
return (document.documentElement.clientWidth > 710);
}
}

和您的模板

<div v-if="isBigger" class="bigger">
</div>
<div v-else class="smaller">
</div>

或

<div v-show="isBigger()" class="bigger">
</div>
<div v-show="!isBigger()" class="smaller">
</div>

如果你想决定使用哪一个，请检查这个问题在vue.js 2中，使用v-if或v-show有什么更好的地方？

Answer 2

thx@快速回答的顶尖人才。你的解决方案对我不起作用，但我稍微改变了一下：

if(document.documentElement.clientWidth > 710){
document.getElementsByClassName[0].style.display = "none";
document.getElementsByClassName("bigger")[0].style.display = "block";
}else{
document.getElementsByClassName("smaller")[0].style.display = "block";
document.getElementsByClassName("bigger")[0].style.display = "none";
}

完美的

Answer 3

这将是正确的方法

methods () {
displayWindowSize(event) {
if(document.documentElement.clientWidth > 710){
document.querySeletor(".smaller").style.display = "none"
document.querySeletor(".bigger").style.display = "block"
console.log("bigger");
}else{
document.querySeletor(".smaller").style.display = "block"
document.querySeletor(".bigger").style.display = "none"
console.log("smaller);
}
}
}