在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元素

回答

相關問題