Vue.js--条件判断(v-if、v-else、v-else-if、v-show)

v-if

条件判定はv-if命令を使用する:

<div id="app">
    <p v-if="seen">     p>
    <template v-if="ok">
    <h1>  h1>
    <p>       p>
    <p>       p>
    template>
div>
    
<script>
new Vue({
el: '#app',
data: {
    seen: false,
    ok: true
}
})
script>  

ここで、v−if命令は、式seenの値(trueまたはfalse)に基づいてp要素を挿入するか否かを決定する.

v-else

v-elseコマンドでv-ifに「else」ブロックを追加できます.例:ランダムに数値を生成し、0.5より大きいかどうかを判断し、対応する情報を出力します.

<div id="app">
    <div v-if="Math.random() > 0.5">
          0.5
    div>
    <div v-else>
            0.5
    div>
div>
    
<script>
new Vue({
    el: '#app'
});
script>

v-else-if

2.1.0が追加され、v-ifのelse-ifブロックとして使用されます.チェーン複数回使用可能:例:type変数の値を判断する

<div id="app">
    <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>
        Not A/B/C
    div>
div>

<script>
    new Vue({
        el: '#app',
        data: {
            type: 'C'
        }
    })
script>

v-show

v-showコマンドを使用して、条件に基づいて要素を表示することもできます.

<div id="app">
    <h1 v-show="ok">Hello!h1>
div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
script>