Move forms bindings to Vue 3 syntax

src/.vuepress/components/forms-1.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="example-1" class="demo">
+    <input v-model="message" placeholder="edit me" />
+    <p>Message is: {{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-2.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="example-textarea" class="demo">
+    <span>Multiline message is:</span>
+    <p style="white-space: pre-line;">{{ message }}</p>
+    <br />
+    <textarea v-model="message" placeholder="add multiple lines"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-3.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="example-2" class="demo">
+    <input type="checkbox" id="checkbox" v-model="checked" />
+    <label for="checkbox">{{ checked }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: false
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-4.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="example-3" class="demo">
+    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
+    <label for="jack">Jack</label>
+    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
+    <label for="john">John</label>
+    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
+    <label for="mike">Mike</label>
+    <br />
+    <span>Checked names: {{ checkedNames }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkedNames: []
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-5.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="example-4" class="demo">
+    <input type="radio" id="one" value="One" v-model="picked" />
+    <label for="one">One</label>
+    <br />
+    <input type="radio" id="two" value="Two" v-model="picked" />
+    <label for="two">Two</label>
+    <br />
+    <span>Picked: {{ picked }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      picked: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-6.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="example-5" class="demo">
+    <select v-model="selected">
+      <option disabled value="">Please select one</option>
+      <option>A</option>
+      <option>B</option>
+      <option>C</option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-7.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="example-6" class="demo">
+    <select v-model="selected" multiple style="width: 50px;">
+      <option>A</option>
+      <option>B</option>
+      <option>C</option>
+    </select>
+    <br />
+    <span>Selected: {{ selected }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: []
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-8.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="example-7" class="demo">
+    <select v-model="selected">
+      <option v-for="option in options" v-bind:value="option.value">
+        {{ option.text }}
+      </option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: 'A',
+      options: [
+        { text: 'One', value: 'A' },
+        { text: 'Two', value: 'B' },
+        { text: 'Three', value: 'C' }
+      ]
+    }
+  }
+}
+</script>

src/.vuepress/config.js

@@ -39,6 +39,7 @@ module.exports = {
             'conditional',
             'list',
             'events',
+            'forms'
           ]
         }
       ]