Vue之表单输入绑定

约定不等于承诺〃 2022-05-15 18:21 214阅读 0赞

## Example ##

在HTML中，表单是很常见的。对于`Vue`来说，使用`v-bind`并不能解决表单域对象双向绑定的需求——所谓双向绑定，就是无论是通过`input`还是通过`vue`对象，都能修改绑定的数据对象的值。  
`Vue`提供了`v-model`进行双向绑定。例如绑定单个文本框：

input: <input type="text" v-model="name">
    value: <span>{
       { name }}</span>

如上，就能将`name`这个值和`input`元素绑定到一起。当输入改变时，`name`的值也会发生改变。

## `v-bind`与文本框、复选框、单选框、下拉框 ##

### 文本框 ###

输入：<input v-model="a">
    值：{
       { a }}

data如下：

data: {
      a: ''
    }

### 复选框 ###

选择：<input type="checkbox" id="checkbox" v-model="checked">
    值：{
       { checked }}

data如下：

data: {
      checked: false
    }

也可以绑定多个复选框到数组对象：

<input type="checkbox" value="java" v-model="checkedArray"> java
    <input type="checkbox" value="c" v-model="checkedArray"> c
    <input type="checkbox" value="python" v-model="checkedArray"> python
    
    <p>CheckedArray value: {
       { checkedArray }}</p>

data如下：

data: { 
      checkedArray: []
    }

还可以绑定单个复选框与数据对象：

选择：<input type="checkbox" id="checkbox2" v-model="checked" v-bind:true-value="msg">
    值：{
       { checked }}

data如下：

data: { 
      msg: 'hello',
      checked: false
    }

### 单选框 ###

<input type="radio" value="A" v-model="radioValue"> A
    <input type="radio" value="B" v-model="radioValue"> B
    <p>radioValue: {
       { radioValue }}</p>

data如下：

data: { 
      radioValue: null
    }

### 下拉框 ###

<select v-model="selected">
      <option disabled value="">请选择</option>
      <option>北京</option>
      <option>上海</option>
      <option>深圳</option>
    </select>
    
    <p>selected: {
       { selected }}</p>

## `v-bind`修饰符 ##

`v-bind`有三个修饰符：`.lazy`、`.number`、`.trim`。用于在同步数据之前进行某些过滤操作。

`.lazy`的作用是用change取代input事件进行数据同步。比如按下enter键或者鼠标点击其他位置才会触发数据同步。

输入：<input type="text" v-model.lazy="b">
    值：{
       { b }}

data如下：

data: { 
      b: null
    }

`.number`的作用是将值转换成数字

输入：<input type="text" v-model.number="b">
    值：{
       { b }}

`.trim`的作用是过滤两端的空格

输入：<input type="text" v-model.trim="b">
    值：{
       { b }}

## 源码 ##

以上示例源码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>v-bind&v-model</title>
    </head>
    <body>
    
    <div id="app" style="margin-left: 30%; width: 40%; margin-top: 50px; text-align: center">
      <div>
        <h3>绑定文本框</h3>
        输入：<input v-model="a">
        值：{
       { a }}
      </div>
      <hr>
      <div>
        <h3>绑定复选框</h3>
        选择：<input type="checkbox" id="checkbox" v-model="checked">
        值：{
       { checked }}
      </div>
      <hr>
      <div>
        <h3>多复选框绑定至数组</h3>
        <input type="checkbox" value="java" v-model="checkedArray"> java
        <input type="checkbox" value="c" v-model="checkedArray"> c
        <input type="checkbox" value="python" v-model="checkedArray"> python
    
        <p>CheckedArray value: {
       { checkedArray }}</p>
      </div>
      <hr>
      <div>
        <h3>绑定单选框</h3>
        <input type="radio" value="A" v-model="radioValue"> A
        <input type="radio" value="B" v-model="radioValue"> B
        <p>radioValue: {
       { radioValue }}</p>
      </div>
      <hr>
      <div>
        <h3>绑定下拉框</h3>
        <select v-model="selected">
          <option disabled value="">请选择</option>
          <option>北京</option>
          <option>上海</option>
          <option>深圳</option>
        </select>
    
        <p>selected: {
       { selected }}</p>
      </div>
      <hr>
      <div>
        <h3>绑定复选框与数据对象</h3>
        选择：<input type="checkbox" id="checkbox2" v-model="checked" v-bind:true-value="msg">
        值：{
       { checked }}
      </div>
    
      <hr>
      <div>
        <h3>修饰符.lazy</h3>
        <p>用change取代input事件进行数据同步。比如按下enter键或者鼠标点击其他位置才会触发数据同步</p>
        输入：<input type="text" v-model.lazy="b">
        值：{
       { b }}
      </div>
      <div>
        <h3>修饰符.number</h3>
        <p>将值转换成数字</p>
        输入：<input type="text" v-model.number="b">
        值：{
       { b }}
      </div>
      <div>
        <h3>修饰符.trim</h3>
        <p>过滤两端的空格</p>
        输入：<input type="text" v-model.trim="b">
        值：{
       { b }}
      </div>
    
    
    
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> var vm = new Vue({ el: '#app', data: { msg: 'hello', a: '', b: null, checked: false, // 复选 checkedArray: [], // 多复选 radioValue: null, // 单选 selected: "" // 下拉选择 } }) </script>
    </body>
    </html>

## 简单化的表单提交事件 ##

下面基于本篇所讲的`vue`绑定表单输入实现一个简单的表单实例，包括表单提交事件。  
此处的代码是一个完整的HTML页面，除了引入了`vue`，还使用了`vue-resource`发送表单提交请求，使用`element-ui`来构建样式。代码如下：  
注：代码中的请求地址是根据项目来的。我的项目端口号是8088，上下文路径是`/api`。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>FormTest</title>
    </head>
    <body>
    
    <div id="app" style="margin: auto; width: 500px; padding-top: 200px;">
    
        <h1 style="text-align: center">登录</h1>
    
        <el-form :label-position="'left'" label-width="80px" :model="loginForm">
            <el-form-item label="用户名">
                <el-input v-model="loginForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="medium" style="width: 45%">注册</el-button>
                <el-button @click="handleLogin" type="primary" size="medium" style="width: 45%;margin-left: 8%">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script> var vm = new Vue({ el: '#app', data: { loginForm: { name: '', password: '', loading: false } }, methods: { handleLogin: function() { this.$http.post('http://localhost:8088/api/login', this.loginForm, { emulateJSON: true }).then(result => { if (result.body.success) { window.localStorage.setItem("user", JSON.stringify(result.body.data.user)) window.location.href = "main" } else { alert(result.body.msg) } }) } } }); </script>
    </body>
    </html>