vue如何实现单击按钮后改变class的某个属性

如题，代码如下：
.mes{

display: none;

}

我想单击某个按钮后，让该class的 display属性由 none改变为block，如何实现呢

var contents = document,getElementByClass("mes");
for(var i ;i<contents.length;i++){
  contents[i].style.display = "block";
}

var contents = document,getElementByClass("mes");
for(var i ;i<contents.length;i++){
  contents[i].style.display = "none";
}

楼上说的对，也可以用ref来操作 dom

<template>
    <div class="">
        <div :style="{ display: isShow ? 'block' : 'none' }">出现了</div>
        <button @click="isShow = !isShow">点击切换</button>
    </div>
</template>
<script>
export default {
    data () { // 定义页面变量
        return {
            isShow: false
        }
    },
}
</script>

<div class="mes" :style="{'display':isFlag?'none':'block'}">测试</div>

或者把需要被控制显示隐藏的div添加v-show属性

<div v-show="isFlag">测试</div>

data:{
  isFlag:false
},
method:{
  changeFun(){
      this.isFlag = true
  }
}

控制显示隐藏直接用v-show, 控制其他样式可以动态绑定style或class

• 看下这篇博客，也许你就懂了，链接：vue改变class样式

看了你的需求，做些回答
1，如果你只是想让某一个元素的display从none到block，可以用v-show为该元素绑定一个值，初始为false，然后给你需要点击的按钮绑定点击事件，@click='funcName'，在这个回调函数里操控那个值即可，如果只想让点击事件触发一次，可以加上事件修饰符，也就是@click.once
2，如果想要改变的属性不一定是display，想要利用class来实现，可以在该元素上绑定一个属性，如下所示：:class='myClass'，在data中可以先给myclass的值置为空，按钮的绑定事件，如1所说，只是需要在回调函数中对myClass变量进行操作，比如你这个类名，this.myClass = 'mes'
示例：
（1）

<div v-show='isShow'>展示</div>
<button @click='changeShow'>点我展示</button>
/* methods配置中  */
isShow(){
  isShow = true
}
/* 别忘了在data中声明*/

（2）

<div :class='myClass'>展示</div>
<button @click='isShow'>点我展示</button>
// methods配置中
isShow(){
  this.myClass = 'mes'
}
// data
myClass : ''

切换class类就可以啊