jsxとvueの条件によってタグを表示させる方法

概要

最近react,vueを触る機会が多いので、メモするほどのことでもないのですが、
初心者やreact,vueってどんな感じなの？って人用に書かせてもらいます。
(シリーズ化して、小出しに記事にしていくかも？)

vueでの条件によって表示させる方法

vueでは表示したい要素のタグの属性にv-ifを追加することで
要素を表示するか、しないかを表現できます。

.vue

<template>
  <div>
    <span v-if="flag">表示されます</span>
    <span v-else>表示されません</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>

vueでの出しわけ方法は分かりやすく、
タグにv-if="~~"というディレクティブ(※)を追加することで、簡単に出しわけができます。
もちろん、v-else-ifも使えます。

※ DOM要素に対して何かを実行することをvue側に伝えるものと覚えておくといいかもしれないです。

jsxでの条件によって表示させる方法

jsxの場合は以下になります。

.jsx

const flag = true;
return (
<div>
  {flag && <span>表示されます</span>}
  // or
  {flag ? <span>表示されます</span> : <span>表示されない</span>}
</div>
)

jsxの場合は{}を記述して、中に条件を書くことでタグの出しわけができます。
flagの管理などはstateと呼ばれるものを使用したりしますが、それはまた別の機会に。