空夜

Vue之表单输入绑定
@(Vue)Example在HTML中,表单是很常见的。对于Vue来说,使用v-bind并不能解决表单域对象双向绑...
扫描右侧二维码阅读全文
05
2018/11

Vue之表单输入绑定

@(Vue)

Example

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

input: <input type="text" v-model="name">
value: <span>{{ name }}</span>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
        el: '#app',
        data: {
          name: ''
        }
      })
</script>

如上,就能将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>
Last modification:December 6th, 2018 at 09:34 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 空夜

    ⌇●﹏●⌇

Leave a Comment Cancel reply