vue操作表单

表单操作

操作文本框

操作文本框使用双向数据绑定来操作文本框中的内容，如下代码所示：

<div class="container">
    <form action="#" method="POST">
        <!-- 双向数据绑定，可以通过 this 获取其中的值 -->
        <label for="uname"><input v-model="uname" type="text" name="uname"></label>
        <label for="upwd"><input v-model="upwd" type="text" name="upwd"></label>
        <input type="submit" value="提交" @click.prevent='submit'>
    </form>
</div>

let vm = new Vue({
   
    el: '.container',
    data: {
   
        uname: '',
        upwd: ''
    }, methods: {
   
        submit: function () {
   
            console.log(this.uname, this.upwd);
        }
    }
})

操作单选按钮

单选按钮仍然需要借助 v-model 指令实现，需要使 v-model 绑定同一个变量名，如下代码所示：

<div class="container">
    <form action="#