在vuejs2中隐藏html元素

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

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

来源

2017-07-25 krrr25

https://vuejs.org/v2/guide/conditional。 html – thanksd

这会很好，如果你教我如何实施。我很难让条件陈述成功。 – krrr25

使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

来源

2017-07-25 16:10:18 thanksd

在vuejs2中隐藏html元素

回答

相关问题