在vuejs2中隐藏html元素

我想在初始加载期间隐藏html元素，通过单击按钮或链接，我将显示这些html元素。我找不到在vuejs2版本中隐藏或显示元素的解决方案。我可以在vuejs中看到一些选项，但我不确定如何使用这些方法。下面是我的组件代码，我想隐藏html元素（id）“Message”

显示统计数据
列表值
测试1
测试2
测试3
你好，我在这里
导出默认值{
姓名：‘工作’，
方法：{
showWorkflow:功能（e）{
console.log（e.target.id）
}
}
}

在Vue中，可以使用有条件地渲染元素

如果只想切换CSS

display

属性，也可以使用

有关更多信息，请参阅上的文档部分

---

在您的特定情况下，将

showWorkflow

数据属性初始设置为

false

将此用作初始隐藏内容的

v-if

指令的参数

然后，如果要显示内容，请将

showWorkflow

设置为

true

：

newvue({
el:“#应用程序”，
数据（）{
返回{
showWorkflow:false，
}
},
})

这是工作流程
显示工作流

如果您能教我如何实施，那就太好了。我发现很难使有条件陈述成功。

<template>
  <div class="row">
        <div class="col-lg-12">
            <label class="checkbox checkbox-inline no_indent">
                <input type="checkbox" value="">Show stats
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">List Values</h3>
                    </div>
                    <div class="panel-body">
                        <button type="button" id="btn1" class="btn btn-warning btn-md" v-on:click="showWorkflow">Test 1</button>
                        <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="showWorkflow">Test 2</button>
                        <button type="button" id="btn3" class="btn btn-info btn-md" v-on:click="showWorkflow">Test 3</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
      <div id="Message">Hello i am here</div>
    </div>
</template>
<script>
  export default {
      name: 'jobs',
      methods: {
          showWorkflow: function (e) {
            console.log(e.target.id)
          }
     }
 }
</script>