MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. ディレクティブのチェックボックス(単一)

ディレクティブのチェックボックス(単一)

Vue.js
2023.08.08

単一チェックボックスは、データプロパティの真偽値で判断します。

チェックボックス(単一)の説明図
記法

[ HTML ] =============================
　<input type=”checkbox” v-model=”データプロパティ名”>

[ Vue.js ] =============================
　data() {
　　return {
　　　データプロパティ名 : データ;
　　},
　},

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>チェックボックス(単一)について</title>
  </head>
  <body>
    <div id="app">
      <p>選択してください。</p>
      <form>
        <label for="agree">利用規約に同意する</label>
        <input type="checkbox" id="agree" v-model="agree" />
      </form>
      <p>回答:{{ agree }}</p>
    </div>

    <script src="./js/checkbox.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      agree: false,
    };
  },
}).mount("#app");
出力結果

選択してください。

回答:{{ agree }}

Vue.js