Vue核心技术-12,表单输入绑定和v-model

一,前言

实际项目开发中经常要用到表达输入,如输入框,单选,多选,下拉等
需要使用这些表单控件完成数据的录入,校验,提交
Vue.js的v-model指令之前已经接触过了,用于在表单元素上实现数据的双向绑定
v-model是一个特殊的语法糖,它能够在不同的表单元素上智能处理
本篇将介绍:
    表单的设置,
    多种表单元素的各种使用方式,
    v-model用于控制数据同步时机的修饰符

---

二,各种表单元素的使用

1,输入框

<div id="app">
  <span>用户名: </span>
  <input type="text" v-model="username"><br>
  <p>输入的用户名是: {{username}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      username: ''
    }
  })
</script>

运行并输入用户名:

在输入框输入的同时,{{}}表达式也会实时将数据渲染到视图

2,textarea

textarea和input的用法基本一致

<div id="app">
  <textarea type="text" v-model="text"></textarea>
  <p>输入的用户名是: {{text}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      text: ''
    }
  })
</script>

运行并输入文本:

和input相同,textarea输入时,{{}}表达式也会实时将数据渲染到视图

注意:

使用v-model后,表单控件显示值只依赖于绑定数据,不在关心初始化时的value属性,
在标签中插入的值也不会生效

3,单选按钮

单选按钮又分为单独使用和组合使用

1)单选按钮-单独使用

单独使用时,不需要v-model,直接使用V-bind绑定一个布尔值即可,用于标志是否选中

<div id="app">
  <input type="radio" :checked="isSelect">
  <label>单选按钮</label>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      isSelect: true
    }
  })
</script>

运行结果:

2)单选按钮-组合使用

单选按钮组合使用,一般是用来实现互斥的选择,需要使用v-model配合value使用

<div id="app">
  <span>性别: </span>
  <input type="radio" id="male" value="男" v-model="sex">
  <label for="male">男</label>
  <input type="radio" id="female" value="女" v-model="sex">
  <label for="female">女</label>

  <p>选择结果是 : {{ sex }}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      sex: '男'
    }
  })
</script>

运行结果:

当数据的值与单选按钮value值相同时,对应的单选按钮将被选中

4,复选框

复选框的使用和单选按钮类似,也分为单独使用和组合使用

1)复选框的单独使用

复选框的单独使用有两种实现方式
一种是只使用v-model绑定一个布尔值用于标志是否选中
另一种是使用v-bind:checked绑定一个布尔值用于标志是否选中

<div id="app">
  <p>复选框-单独使用</p>
  <!--方法一-->
  <input type="checkbox" v-model="isSelect">
  <label>方法1-v-model</label><br>
  <!--方法二-->
  <input type="checkbox" :checked="isSelect">
  <label>方法2-v-bind</label>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      isSelect: true
    }
  })
</script>

运行结果:

2)复选框的组合使用

多个复选框组合使用时,需要使用value
多个复选框值绑定到同一个数组中,匹配对应value值的复选框就会被选中

<div id="app">
  <span>运动: </span>
  <input type="checkbox" id="basketBall" value="basketBall" v-model="sports">
  <label for="basketBall">篮球</label>
  <input type="checkbox" id="footBall" value="footBall" v-model="sports">
  <label for="footBall">足球</label>
  <input type="checkbox" id="tennis" value="tennis" v-model="sports">
  <label for="tennis">网球</label><br>

  <p>选择结果是 : {{ sports }}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      sports: ['footBall']
    }
  })
</script>

运行结果:

初始化默认勾选与sports数组中的值footBall相匹配的”足球”复选框

当勾选”篮球”复选框时,sports数组也随之变化:

5,下拉框

下拉框也分为单选和多选两种使用方式

注意:

<select>控件也称作选择列表,但在实际业务中不常用,
因为它的样式在各个浏览器有差异,不美观也无法统一,功能上也不那么完善
所以经常会自定义或使用第三方提供的类似功能控件

1)单选下拉框

<div id="app">
  <select v-model="sex">
    <option value="">请选择</option>
    <option value="男">男</option>
    <option>女</option>
  </select>
  <p>选择结果是 : {{ sex }}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      sex: '女'
    }
  })
</script>

<option>为备选项,若有value值,v-model会优先匹配value值
若没有value值,会直接匹配<option>中的text值,例如此例匹配结果是女

2)多选下拉框

多选下拉框只需在单选下拉框的基础上添加mutiple属性即可
此时v-model绑定的是一个数组,复选框的组合使用类似

<div id="app">
  <select v-model="heros" multiple>
    <option value="0">露娜</option>
    <option value="1">孙悟空</option>
    <option value="2">后裔</option>
    <option value="3">李白</option>
  </select>

  <p>选择结果是 : {{ heros }}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      heros:['0','2']
    }
  })
</script>

运行结果:

开发中,下拉框的数据有可能是动态的,需要使用v-for动态输出

<div id="app">
  <select v-model="selected">
    <option value="0">未选择</option>
    <option :value="book.id" v-for="(book, index) in books" 
            :key="book.id">{{book.name}}</option>
  </select><br>

  <p>选择结果是 : {{ selected }}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      selected: 1,
      books: [
        {id: 1, name: 'Vue.js'},
        {id: 2, name: 'Javascript'},
        {id: 3, name: 'Css'},
        {id: 4, name: 'Html'}
      ]
    }
  })
</script>

运行结果:
初始化选中selected=1对应的book.id=1的选项

当改变下拉框选项时-选择id=2的javascript,v-model绑定的选择结果selected动态改变:

---

三,表单元素的值绑定使用

上边介绍的各种表单元素,在单独使用时v-model绑定的值为静态字符串或布尔值
但在实际开发中,很多时候需要绑定一个动态数据,这时需要使用v-bind实现绑定

1,单选按钮的值绑定

<div id="app">
  <input type="radio" v-model="selected" :value="value">
  <label>单选按钮-值绑定</label>

  <p>selected值 : {{ selected }}</p>
  <p>value值 : {{ value }}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      selected:false,
      value:'abc'
    }
  })
</script>

运行结果:

选中时,vm.selected === vm.value,值为abc

2,复选框的值绑定

<div id="app">
  <input type="checkbox"
         v-model="isSelect"
         :true-value="select"
         :false-value="unselect">
  <label>复选框-值绑定</label>

  <p>isSelect值 : {{isSelect}}</p>
  <p>select值 : {{select}}</p>
  <p>unselect值 : {{unselect}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      isSelect: false,
      select:'a',
      unselect:'b'
    }
  })
</script>

运行结果:
初始化v-model绑定值为false,复选框未被选中:

选中时,vm.isSelect === vm.select,值为a:

2,下拉框的值绑定

<div id="app">

  <select v-model="selected">
    <option :value="{name:123}">123</option>
  </select>

  <p>selected.name值 :{{selected.name}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      selected: 1,
    }
  })
</script>

运行结果:
初始化下拉框v-model绑定值为1,没有匹配选中项:

当下拉框选中123时,v-model被赋值为123选项对应的value值,
是一个对象,并对其中的属性进行打印:

---

四,表单的设置

简单说一下表单的设置

通常需要使用表单进行用户输入和提交请求,Vue还提供了基于表单的验证,很方便
在使用表单时,表单有自己的action和submit提交可以设置
有时我们可能并不需要这种"便利",所以要阻止表单提交事件执行,并使用ajax进行数据上传

<div id="app">
  <!--@submit.prevent阻止提交事件执行默认行为-->
  <form action="/xxx" @submit.prevent="handleSubmit">
    <input type="submit" value="submit">
  </form>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
      handleSubmit () {
        alert('提交注册的ajax请求')
      }
    }
  })
</script>

如上,使用了@submit.prevent阻止submit默认事件执行
(这部分知识在方法和事件那篇对事件的修饰符有介绍)

并使用方法选项定义了,提交按钮的事件,可以在这里调用接口上传数据

---

五,v-model修饰符

与前面介绍的事件修饰符类似,v-model也有修饰符,用于控制数据的同步时机

.lazy

输入框中,v-model默认在input事件中同步输入框数据
使用.lazy修饰符会转变为在change事件中进行数据同步

使用方式:

<input v-model.lazy="value" >

这时,数据并不是事实同步的,而是在失去焦点或按回车时才会更新

.number

修饰符.number能将输出字符串转为Number类型,在数字输入框时比较有用,
虽然type类型可以定义为number类型,但如果输入字符串,此时输出的还是string

使用方式:

<input v-model.number="age" type="number">

.trim

修饰符.trim能够自动过滤输入的首尾空格

使用方式:

<input v-model.lazy.trim="value" >

Vue2.x

自Vue2.x开始.v-model可以用于自定义组件,这部分在组件部分进行介绍

---

六,结尾

今天临时有事出去了一整个下午,影响了更新进度

本来觉得这是很简单的一篇,没想到写着就停不下来了,确实涉及的东西不少
在开组件之前,会把遗漏的一些知识点补齐,
下一篇介绍过滤器