Vue中使用js动态修改元素样式方法

前言

在Vue页面中使用js修改元素样式同在普通Html页面，首先也是定位元素，然后直接修改元素样式。

使用原生js获取dom元素

1、通过id定位元素

<div id="leftmenu" @click="toggleMenuList" class="left-menu">

2、使用原生js修改样式：

document.getElementById("leftmenu").style.width = '200px';
document.getElementById("leftmenu").style.cssText='width: 450px; border: 1px solid #eee;';

使用ref获取dom元素

1、在所需修改的地方添加ref属性，例如：

<div ref="leftmenu" @click="toggleMenuList" class="left-menu">

2、然后，在js使用如下方式修改样式：

this.$refs.leftmenu.style.width='450px';
this.$refs.leftmenu.style.cssText='width: 450px; border: 1px solid #eee;';

（完）