[Vue.js]v-ifを用いて、入力がない際の表示を切り替える

結論

<input v-model="value">

<p v-if="value !== null">
 {{ value }}です
</p>

<p v-else>
入力してください
</p>

inputの部分は入力フォームです。

Vue.jsのフォーム入力バインディングにより、{{ value }}に入力した文字が入ります。
!==は真偽値falseになるため、value=空ではない時(false)、valueが表示され、入力がない場合にv-elseが表示されます。

注意点

dataにてしっかりとvalueを定義してください。
そうしないとエラーが出ます。
私はこれでちょっとはまりました。

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    value: null
})
}

</script>

参考例

 <p v-if="value !== null">
          <!-- {{マリオ}}の場合、ジャンプ投げ空上は{{~65%}}、２段ジャンプ空上は{{~76%}}で確定します -->
          {{ value }}の場合、ジャンプ投げ空上は{{ jump() }}、２段ジャンプ空上は{{ jump2() }}で確定します

        <p v-else>
          キャラを選択してください
        </p>