Vue.js Vue覆盖导航

我用side overlay nav创建了这个Vue应用程序，我正试图用更好的方法重新创建它，但由于我是Vue新手，我不知道如何创建。有没有更好的方法不用javascript-DOM通过ID选择元素并设置其宽度，只使用Vue就可以做到这一点？我知道有一种更好的方法可以通过Vue实现这一点

var openNav=（）=>{
document.getElementById（'myNav'）。style.width='50%'
}
var closeNav=（）=>{
document.getElementById（'myNav'）。style.width='0%'
}
新Vue({
el:“#应用程序”，
方法：{
openOverlay（）{
openNav（）
},
closeOverlay（）{
closeNav（）
}
},
})
$（函数（）{
openNav（）
closeNav（）
})

.navbar左侧{
@包含输入样式（2em）
}
.导航栏图标{
大纲：无；
边界：0；
盒影：无；
}
.navbar图标：：之前{
内容：'\F0C9'；
字体系列：“FontAwesome”，衬线；
字体大小：24px；
}
.覆盖{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.overlay a:悬停，.overlay a:焦点{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}

---

指定数据属性：

data () {
  return { 
    open: false
  }
}

现在只需使用1个函数：

methods: {
  toggleOverlay() {
    this.open = !this.open
  }
}

现在只需使用

open

属性来确定何时应该设置宽度。为简单起见，我们将以内联方式进行：

<div id="myNav" class="overlay" :style="{ width: open ? '50%': '0' }">

---

分配数据属性：

data () {
  return { 
    open: false
  }
}

现在只需使用1个函数：

methods: {
  toggleOverlay() {
    this.open = !this.open
  }
}

现在只需使用

open

属性来确定何时应该设置宽度。为简单起见，我们将以内联方式进行：

<div id="myNav" class="overlay" :style="{ width: open ? '50%': '0' }">