【Vue.js】v-ifディレクティブの使い方について解説します。

Vue.js Web制作

【Vue.js】v-ifディレクティブの使い方について解説します。

※本記事は広告が含まれる場合があります。

なやむくん
Vue.jsでも条件分岐させたい。

なやむさん
v-ifディレクティブに使い方を知りたい。

などの疑問や悩みを解決してまいります。

プログラミング言語を学んでいる方であれば「if文」を聞いたことはあるのではないでしょうか。

Vue.jsでも専用のif文の指定をすることができ、これをv-ifディレクティブと言います。

v-ifディレクティブを使用することで簡単に条件分岐をさせることが可能です。

この記事ではv-ifディレクティブについて解説していきます。

みつた
難しい指定方ではないので比較的簡単に習得できると思います！
なやむくん
本当でしょうか・・・不安です。

v-ifディレクティブとは

v-ifディレクティブとは特定の条件が真（true）である場合に、要素を表示するかどうかを指定します。

つまり、条件が満たされている場合にだけHTML要素が表示され、条件が満たされていない場合は非表示になります。

実際に使用例を見ていきましょう。

実際にv-ifディレクティブを使用してみよう

それでは実際に見ていきましょう。

今回2つのVueファイルを用意しました。ページに表示するApp.vueとコンポーネントファイルのPost.vueです。

<script setup lang="ts">
  import Post from './components/Post.vue';
</script>

<template>
  <div class="container">
    <Post />
  </div>
</template>
<script setup lang="ts">
import { ref,computed } from 'vue'
const inputValue = ref<string>('')
const lengthLimit: number = 10
const isValidName = computed(() => {
  if (inputValue.value.length < lengthLimit) {
    return true
  } else {
    return false
  }
})
</script>

<template>
  <div class="container">
    <p>↓↓文字を入力してください。↓↓</p>
    <input v-model="inputValue" type="text">
    <p v-if="!isValidName" class="error">入力は{{ lengthLimit }}文字未満にしてください。</p>
  </div>
</template>

こちらはinputタグに入力した文字数が10文字以上となると赤字で注意書きが表示する仕組みになっています。

みつた
お問い合わせフォームによくあるバリデーションの1つですね。

まず表示させたい要素にv-ifディレクティブを指定しています。

v-if＝""内に条件式を記述し、その条件式がtrueの場合はテキストを表示するというようにしていきます。

今回はrefとcomputedを使用するので、Vueからimportしていきます。

import { ref,computed } from 'vue'

次にinputタグに入力された値をリアクティブな値とするため、定数inputValueにrefを指定します。

const inputValue = ref<string>('')

次に文字数の制限を設定します。今回は10文字に到達すると注意書きを表示させたいので、数字「10」を値とした定数lengthLimitを作成します。

const lengthLimit: number = 10

次に条件式を作成していきます。

条件式には入力した内容が変更になる度にチェックしてもらうためcomputed（計算プロパティ）を指定します。

次にinputValue.value.length < lengthLimitとして、入力した文字数よりが10未満の場合はtrueを返し、10文字を超える場合はfalseを返します。

この処理を定数isValidNameに入れています。

const isValidName = computed(() => {
  if (inputValue.value.length < lengthLimit) {
    return true
  } else {
    return false
  }
})

そして定数isValidNameをv-if=""に入れています。

<p v-if="!isValidName" class="error">入力は{{ lengthLimit }}文字未満にしてください。</p>

否定演算子を使用していますが、これにより「trueじゃなければ（つまりinputValue.value.length > lengthLimit）」という条件を作ることができます。

v-elseディレクティブを使用したコード例

次にv-elseディレクティブを使用した場合のコード例を紹介いたします。

v-elseディレクティブはv-ifディレクティブの条件式がfalseの場合に表示させることができます。

実際に見てみましょう。

Post.vueの内容を以下のように変更しました。

<script setup lang="ts">
import { ref,computed } from 'vue'
const postContents = ref([])
const inputValue = ref<string>('')
const postButton = () => {
  if (inputValue.value.length <= 0) {
    alert('フォームに値を入力してください。')
  } else {
    const inputData = {
      id: Math.random(),
      description: inputValue.value
    }
    postContents.value.push(inputData)
    inputValue.value = ''
  }
}
const deleteButton = (id: number) => {
  postContents.value = postContents.value.filter(t => t.id !== id)
}
const lengthLimit: number = 10
const isValidName = computed(() => {
  console.log(isValidName.value)
  if (inputValue.value.length < lengthLimit) {
    return true
  } else {
    return false
  }
})
</script>

<template>
  <div class="container">
    <h1>文字を入力して投稿しよう！</h1>
    <div class="input_box">
      <input v-model="inputValue" type="text">
      <button v-on:click="postButton()" class="post_btn">投稿する</button>
    </div>
    <p v-if="!isValidName" class="error">入力は{{ lengthLimit }}文字未満にしてください。</p>
    <p v-if="postContents.length <= 0" class="no_post">投稿がありません。</p>
    <ul v-else>
      <li v-for="postContent in postContents" :key="postContent.id">
        <span>{{ postContent.description }}</span>
        <button v-on:click="deleteButton(postContent.id)" class="delete_btn">削除</button>
      </li>
    </ul>
  </div>
</template>

コードが長くなってしまいましたが、順に説明していきます。

このコードでは簡単な投稿アプリを作成しています。

フォームに文字を入力して、投稿ボタンをクリックするとその内容をリスト形式で表示することができます。

また削除ボタンをクリックするとその削除ボタンを押したリストの身を削除することもできるようにしています。

「投稿がありません。」は投稿されている内容がない場合に表示されるようにv-ifディレクティブを使用しています。

条件式にはpostContents.length <= 0としています。

<p v-if="postContents.length <= 0" class="no_post">投稿がありません。</p>

このif文の条件式がfalseの場合は、v-elseディレクティブの内容を表示します。

<ul v-else>
  <li v-for="postContent in postContents" :key="postContent.id">
    <span>{{ postContent.description }}</span>
    <button v-on:click="deleteButton(postContent.id)" class="delete_btn">削除</button>
  </li>
</ul>

postContentsとはリアクティブな配列データとして定数を作成しています。

const postContents = ref([])

リアクティブな値に指定しているため、この値に何かしらの変更があった場合ページが再更新されます。

なので投稿があった場合に配列データpostContentsに値が追加されるようになっているため、ページが更新され投稿があるなしで「投稿がありません。」のテキストの表示非表示を切り替えています。

投稿ボタンがクリックされた場合に入力した内容が表示されるようになる処理はpostButton関数になります。

const postButton = () => {
  if (inputValue.value.length <= 0) {
    alert('フォームに値を入力してください。')
  } else {
    const inputData = {
      id: Math.random(),
      description: inputValue.value
    }
    postContents.value.push(inputData)
    inputValue.value = ''
  }
}

まず最初にif文でフォームに文字が入力されているかをチェックします。

入力がない状態で投稿ボタンをクリックされた場合に「フォームに値を入力してください。」というアラートが表示されるようにしています。

なやむくん
入力がない状態で投稿ができてしまったら不自然ですもんね…。

また投稿した内容は、オブジェクト型のデータinputDataに格納しています。

const inputData = {
   id: Math.random(),
   description: inputValue.value
}

最後に配列データpostContentsにはオブジェクト型のデータinputDataを追加しています。

postContents.value.push(inputData)
inputValue.value = ''
みつた
追加した後はフォームの中身を空にする処理も入れていますね！

長くなってしまいましたが、以上がv-elseディレクティブを使用した簡単な投稿アプリの紹介でした。

-Vue.js, Web制作