web-dev-qa-db-ja.com

div onclickを非表示Vue

クリックしたときにVue.jsで要素を非表示にするにはどうすればよいですか？非表示にする要素は1つだけです。

JQueryソリューションは次のようになります。

$('.button').click(function() {
  $('.hideme').hide();
);

しかし、これに相当するVue.jsは何ですか？

javascriptvue.jsfrontend
10
Victor Berland

まず、jQueryはそのまま使用できます。これが主な違いの1つです。したがって、Vueコンポーネントまたはアプリを初期化する必要があります。そのコンポーネントをデータでテンプレート内の特定のHTMLタグにバインドしています。この例では、指定された要素は<div id="app"></div>el: #appを介してターゲット設定されます。これはjQueryからわかります。

その後、トグル状態を保持する変数を宣言します。この場合、isHiddenです。初期状態はfalseであり、dataオブジェクト内で宣言する必要があります。

残りはv-on:click=""やv-if=""などのVue固有のコードです。よりよく理解するには、Vueのドキュメントをお読みください。

簡単な概要を知りたい場合は、この順序で読むことをお勧めします。しかし、理解を深めるために、ドキュメントの全体または少なくとも長い部分を読むことを検討してください。

var app = new Vue({
  el: '#app',
  data: {
    isHidden: false
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isHidden = true">Hide the text below</button>
  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>
  
  <h1 v-if="!isHidden">Hide me on click event!</h1>
</div>
15
Michael Czechowski

これは非常に基本的なVueの質問です。最初のページでさえ質問に答えるガイドを読むことをお勧めします。

ただし、まだ答えが必要な場合は、Vueで要素を非表示/表示する方法です。

new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div v-show='toggle'>showing</div>
</div>
7
samayo
<div>
    <div>

        <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>

        <h1 v-if="!isHidden">Hide me on click event!</h1>
    </div>
</div>

name: "Modal",
    data () {
        return {
            isHidden: false
        }
    }
1
Adam Colton