Question

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

<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>

Answer 1

在Vue中，您使用v-if directive来有条件地渲染元素。

如果您只想切换CSS display属性，也可以使用v-show directive。

有关详细信息，请参阅Conditional Rendering上文档中的部分。

在您的具体情况下，请将showWorkflow数据属性初始设置为false。

将此作为您最初要隐藏的内容的v-if指令的参数。

然后，当您想要显示内容时，请将showWorkflow设置为true：

new Vue({
  el: '#app',
  data() {
    return {
      showWorkflow: false,
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <div v-if="showWorkflow">
    Here is the workflow
  </div>

  <button @click="showWorkflow = true">Show Workflow</button>
</div>

Here is the documentation on conditional rendering in Vue

隐藏vuejs2中的html元素

1 个答案: