Vue.js v-ifとv-modelのサンプルコード

Vue.js v-ifとv-modelのサンプルコード

v-ifとv-modelの基本的な使い方

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • @vue/cli 4.0.5

※centos8にVue.jsの環境構築手順はこちら

仕様

初期画面

テキストボックス に文字列を入力すると、入力した文字列が表示される

「clear」ボタンをクリックすると、テキストボックスの文字列が全て削除され「テキストを入力して下さい」という文言が表示される

サンプルコード

src/App.vueを下記のコードに編集する

v-if=”msg.length > 0 “により msg に文字列があるかを判定し、v-elseがそれ以外の条件となります

v-model=”msg”により、テキストボックスと msg がデータバインディング される

main.js とindex.html

src/main.jsはインストール時のまま

render: h => h(App) について

public/index.htmlもインストール時のまま