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="#" method="POST">
        <input type="radio" id="man" name="sex" value="男" v-model="usex">
        <label for="man">男</label>
      
        <input type="radio" id="woman" name="sex" value="女" v-model="usex">
        <label for="woman">女</label>
      
      	<input type="submit" value="提交" @click.prevent='submit'>
    </form>
</div>

上面代码中第 3 行和第 6 行创建了两个单选按钮，使用 v-model 指令绑定了同一个 usex 变量。JS 部分如下所示：

let vm = new Vue({
    el: '.container',
    data: {
        // 将 usex 设置为上面单选按钮中的 value 时，相应的单选按钮被选中
        usex: "女"
    }, methods: {
        submit: function () {
            console.log(this.usex);
        }
    }
})

在 Vue 实例中，将 usex 的值设置为了 女，页面渲染时被选中的单选按钮为设置的值。

操作多选按钮

操作多选按钮同需要使用 v-model 指令对属性进行绑定在操作多选按钮时 v-model 指令绑定的变量为数组类型。

如下代码所示：

<div class="container">
    <form action="#" method="POST">
        <input type="checkbox" v-model="hobby" value="篮球" name="" id="1">
        <label for="1">篮球</label>
        <input type="checkbox" v-model="hobby" value="足球" name="" id="2">
        <label for="2">足球</label>
        <input type="checkbox" v-model="hobby" value="乒乓球" name="" id="3">
        <label for="3">乒乓球</label>
        <input type="submit" value="提交" @click.prevent='submit'>
    </form>
</div>

let vm = new Vue({
    el: '.container',
    data: {
        // 将 usex 设置为上面单选按钮中的 value 时，相应的单选按钮被选中
      	// 这里设置了篮球为默认值，则页面中“篮球”被选中
        hobby: ['篮球']
    }, methods: {
        submit: function () {
            console.log(this.hobby);
        }
    }
})

操作下拉列表

操作下拉列表需要在 select 标签中设置 v-model 指令。v-model 指令设置的变量为下拉列表选中的值。如下代码所示：

<div class="container">
    <form action="#" method="POST">
        <select v-model="city" name="" id="">
            <option value="河北">河北</option>
            <option value="湖南">湖南</option>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="上海">上海</option>
        </select>
        <input type="submit" value="提交" @click.prevent='submit'>
    </form>
</div>

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

在代码中，将 city 的默认值设置为了 “北京”，页面打开时默认的值为北京，结果：

如果一个下拉列表中可以选择多个值，需要在 <select> 标签中加上 multiple 属性，表示允许选中多个值；相应的 JS 部分，需要将 city 对应的数据类型改为数组结构。如下代码所示：

<select v-model="city" name="" id="" multiple>
    <option value="河北">河北</option>
    <option value="湖南">湖南</option>
    <option value="北京">北京</option>
    <option value="天津">天津</option>
    <option value="上海">上海</option>
</select>

let vm = new Vue({
    el: '.container',
    data: {
        city: ['北京']
    }, methods: {
        submit: function () {
            console.log(this.city);
        }
    }
})

结果：

表单域修饰符

• number ：将文本框中的内容转为数值
• trim ：去掉开始和结尾的空格
• lazy ：将 input 事件改为 change 事件

input 事件：每次在输入框中键入文本时都会触发
change 事件：每次在输入框键入文本之后，失去焦点时触发

使用方式：

<input v-model.trim="str" type="text">