定番
新着

VueJS ifのクリックで切り替え

VueJS ifのクリックで切り替え

コードを書くときに、条件分岐は必須です。

その中で重要な役割を果たす「if」のコードのサンプルです。

<div id="myApp" class="demo_code">
	<div v-if="type === 'A'">
	  Aが指定されてます
	</div>
	<div v-else-if="type === 'B'">
	  Bが指定されてます
	</div>
	<div v-else-if="type === 'C'">
	  Cが指定されてます
	</div>
	<div v-else>
	  すべてに該当しません
	</div>

	<button v-on:click="push_a">A</button>
	<button v-on:click="push_b">B</button>
	<button v-on:click="push_c">C</button>

</div>

JSの記述はこちら。

わかりやすいように、クリックによりメソッドが発動する簡単な例もいれてます。

var app = new Vue({
  el: '#myApp',
  data: {
    type: 'A'
  },
  methods: {
    push_a: function (event) {
      this.type = 'A'
    },
    push_b: function (event) {
      this.type = 'B'
    },
    push_c: function (event) {
      this.type = 'C'
    }
  }

})

実行結果

Aが指定されてます
Bが指定されてます
Cが指定されてます
すべてに該当しません

クリックの部分を消してシンプルにすると、以下の記述で条件分岐のAの部分だけを実行するということになります。

var app = new Vue({
  el: '#myApp',
  data: {
    type: 'A'
  }
})

必ずこのように書かないといけないというわけではないので、ご参考までに。

書き方に間違いがあれば、随時更新していきます。

2018-01-02 00:43:16
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top