注：例項環境 vue cli構建的專案

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <form @submit.prevent="onSubmit">
            <label>使用者名稱:</label>
            <input type="text" v-model="username" placeholder="使用者名稱"/>
            <br>
            <label>密碼:</label>
            <input type="password" v-model="password" placeholder="密碼"/>
            <br>
            <label>性別:</label>
            <input type="radio" v-model="sex" value="男"/>男
            <input type="radio" v-model="sex" value="女"/>女
            <br>
            <label>興趣愛好:</label>
            <input type="checkbox" v-model="hobby" value="看書"/>看書
            <input type="checkbox" v-model="hobby" value="運動"/>運動
            <input type="checkbox" v-model="hobby" value="旅遊"/>旅遊
            <br>
            <label>喜愛的顏色</label>
            <select v-model="color">
                <option>紅色</option>
                <option>藍色</option>
                <option>黑色</option>
            </select>
            <br>
            <label>備註</label><br>
            <textarea v-model="message" placeholder="其他說明"></textarea>
            <br>
            <input type="submit" value="提交"/>
        </form>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                username:'',
                password:'',
                sex:'',
                hobby:[],
                color:'',
                message:''
            }
        },
        methods:{
            onSubmit:function () {
                alert("使用者名稱：" + this.username + ' 密碼：' + this.password + ' 性別：' + this.sex + ' 愛好:' + this.hobby + ' 顏色:' + this.color + ' 備註：' + this.message);
            }
        }
    }
</script>

<style scoped>
</style>
 

瀏覽器顯示