10，vue进阶打怪，vue表单输入绑定，带您走进“薪”世界

贪吃蛇学院

于 2020-10-27 08:40:23 发布

阅读量431

点赞数 3

分类专栏：前后端分离vue vue.js node.js 文章标签： javascript sass less webpack 前端

本文链接：https://blog.csdn.net/cyhlili100/article/details/109303304

版权

vue.js 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

前后端分离vue

17 篇文章 0 订阅

订阅专栏

node.js

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

2020【前端VUE框架】最新最全实战课程，VUE56节分享，免费拿不谢！

贪吃蛇学院带您飞：

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与文本框、复选框、单选框、下拉框
文本框
输入：
值：{{ a }}

data如下：

data: {
  a: ''
}

复选框
选择：
值：{{ 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: []
}

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

选择：
值：{{ 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>