vuejs2のhtml要素を非表示にする

Question

最初の読み込み中にhtml要素を非表示にするには、ボタンまたはリンクをクリックしてhtml要素を表示します。私は、vuejs2バージョンで要素を隠すか表示するための解決策を見つけることができません。私はvuejsでいくつかのオプションを見ることができますが、私はそれらのメソッドを使用する方法がわかりません。以下は、html要素（id） "Message"を隠したいという点で、私のコンポーネントコードです。

<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

はshowWorkflow当初falseに設定されたデータのプロパティを確認します。

最初に非表示にするコンテンツのv-ifディレクティブの引数としてこれを使用します。あなたがコンテンツを表示したいとき

その後、trueにshowWorkflowを設定します。

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