v-modelで双方向データバインディングを実現する

v-modelディレクティブで双方向データバインディングを実現できます。データオブジェクトとテンプレートの状態を同期する仕組みです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <form>
   <label for="name">名前：</label>
   <input type="text" id="name" v-model="myName" />
  </form>
  <div>こんにちは！ {{ myName }} さん！</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/form.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    myName: '匿名'
  }
})

チェックボックス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <form>
    <label for="agree">同意する:</label>
    <input type="checkbox" id="agree" v-model="agree" />
  </form>
  <div>回答: {{ agree }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/model_check.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    agree: true
  }
})

複数選択のチェックボックス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <div>お使いのOSは？</div>
  <label for="windows">Windows</label>
  <input type="checkbox" id="windows" value="Windows" v-model="os" />
  <label for="linux">Linux</label>
  <input type="checkbox" id="linux" value="Linux" v-model="os" />
  <label for="macos">macOS</label>
  <input type="checkbox" id="macos" value="macOS" v-model="os" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/model_check.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    os: [ 'macOS', 'Linux' ]
  }
})

ファイル入力ボックス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <form>
    <input ref="upfile" type="file" v-on:change="onchange" />
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/model_file.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onchange: function() {
      let fl = this.$refs.upfile.files[0];
      let data = new FormData();
      data.append('upfile', fl, fl.name);
      fetch('upload.php', {
        method: 'POST',
        body: data,
      })
        .then(function (response) {
          return response.text();
        })
        .then(function (text) {
          this.message = text;
        })
        .catch(function (error) {
          window.alert('Error: ' + error.message);
        })
    }
  }
})

カンマ区切りで入力したtextareaのメールアドレスを分解してlistで表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <form>
    <label for="mail">メールアドレス:</label>
    <textarea id="mail" v-bind:value="mails.join(',')"
              v-on:input="mails=$event.target.value.split(',')"></textarea>
  </form>
  <ul>
    <li v-for="mail in mails">
      {{ mail }}
    </li>
  </ul>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/model_custom.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    mails: [],
  }
})

f:id:websier:20210424093458p:plain