表单

 <div id="app">

        <form action="">

            <fieldset>

                <legend>用户注册</legend>

                <p>用户名：<input type="text" v-model="user" name="user"></p>

                <p>密码框<input type="password" v-model="pwd" name="pwd"></p>

                <p>性别：

                    <input type="radio" name="a" v-model="sex" value="男">男

                    <input type="radio" name="a" v-model="sex" value="女">女

                </p>

                <p>爱好：

                    <input type="checkbox" v-model="arr" value="篮球" name="aihao">篮球

                    <input type="checkbox" v-model="arr" value="排球" name="aihao">排球

                </p>

                <p>

                    <button>提交</button>

                    <input type="reset" value="重置" @click="fn">

                </p>

            </fieldset>

        </form>

        表单内容如下：

        <p>

            用户名：{{user}}

        </p>

        <p>

            密码：{{pwd}}

        </p>

        <p>

            性别：{{sex}}

        </p>

        <p>

            爱好：{{arr}}

        </p>

    </div>

    <script src="./vue2.6.14.js"></script>

    <script>

        new Vue({

            el: "#app",

            data: {

                user: "",

                pwd: "",

                sex: "",

                arr: []

            },

            methods:{

                fn(){

                    this.user = '';

                    this.pwd= '';

                    this.sex= '';

                    this.arr= [];

                }

            }

        })

    </script>