Vue基础之表单Form(一)

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子:<div id="app"><input type="text" v-model="message" placeholder="请输入....

1 2 3 一起追梦

9431人浏览 · 2022-04-13 17:37:24

1 2 3 一起追梦 · 2022-04-13 17:37:24 发布

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子:

<div id="app">
    <input type="text" v-model="message" placeholder="请输入....">
    <p>{{message}}</p>
</div>
<script>
    var vm=new Vue({
         el:'#app',
       data:{
               message:'你好 hellow world!'
           }
    }) 
</script>

在输入框输入的同时，｛{ message } ｝也会实时将内容渲染在视图中。

对于文本域textarea也是同样的用法：

<div id="app">
    <textarea type="text" v-model="text" placeholder="请输入...."></textarea>
    <p>输入的内容是:</p>
    <p style="white-space:pre">{{text}}</p>
</div>
<script>
    var vm=new Vue({
         el:'#app',
       data:{
               text:'你好 hellow world!'
           }
    }) 
</script>

注:

white-space属性值

normal：忽略多余的空白，只保留一个空白（默认）；
pre：保留空白(行为方式类似于html中的pre标签)；
nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
pre-wrap：保留空白符序列，正常地进行换行；
pre-line：合并空白符序列，保留换行符；
inherit：从父元素继承white-space属性的值

使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在＜textarea></textarea>之间插入的值，也不会生效．使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发史新。如果希望总是实时更新，可以用＠input来替代v-model.事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。例如下面的示例：

<div id="app">
    <input type="text" @input="handInput" placeholder="请输入....">
    <p>输入的内容是:</p>
    <p style="white-space:pre">{{text}}</p>
</div>
<script>
    var vm=new Vue({
         el:'#app',
       data:{
               text:'你好 hellow world!'
           }
        
       methods:{
                handInput:function(e){
                      this.text=e.target.value;
                }
            }
    }) 
</script>

e是一个vue对象--->input { target: input, isTrusted: true, isComposing: false, inputType: "insertText", data: "2", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }可以看到target中才是一个js对象。

单选按钮：

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选，例如：

<div id="app">
    <input type="radio" value="man" :checked="picked">
</div>
<script>
    var vm=new Vue({
       el:'#app',
       data:{
               picked:true
           }
    }) 
</script>

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：

<div id="app">
      <input type="radio" value="man" v-model="picked" id='man'> 
       <label for='man'>man</label>
      <input type="radio" v-model="picked" value="woman" id='woman'><br/>
       <label for='woman'>woman</label>
</div>
<script>
    var vm=new Vue({
       el:'#app',
       data:{
               picked:''
           }
    }) 
</script>

复选框：

复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，用v-model来绑定一个布尔值，例如：

<div id='app'>
    <input type="checkbox" v-model="checked" id="checked">
	<p>{{checked}}</p>
<div>

<script>
    var app=new Vue({
        el:'#app',
      data:{
        checked:true
         }
      
    })
</script>

在勾选时，数据checked的值变为了true,label中渲染的内容也会更新。组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中，示例代码如下：

<div id='app'>
<input type="checkbox" v-model="checked" value="html" id="html">
   <label for="html">html</label>
<input type="checkbox" v-model="checked" value="js" id="js">
   <label for="js">js</label>
<input type="checkbox" v-model="checked" value="css" id="css">
   <label for="css">css</label>
<template v-for="i in checked">
		     <p>{{i}}</p>
</template>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
         checked:[]
        }
    
    })
</script>

选择列表：

选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。先看一下单选的示例代码：

<div id='app'>
<select v-model="dectecd">
			<option>html</option>
			<option value='js'>js</option>
			<option>css</option>
</select>
		<p>{{dectecd}}</p>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
         dectecd:'',
        }
    
    })
</script>

<option＞是备选工页，如果含有value属性，v-model就会优先匹配value的值：如果没有，就会直接匹配＜option＞的text，比如选中第二项时，selected的值是js，而不是JavaScript。

给＜selected＞添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似，示例代码如下：

<div id='app'>
<select v-model="dectecd" multiple>
			<option>html</option>
			<option value='js'>js</option>
			<option>css</option>
</select>
		<p>{{dectecd}}</p>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
         dectecd:[],
        }
    
    })
</script>

在业务中，＜option＞经常用v-for动态输出，value和text也是用v-bind来动态输出的，例如：

<div id='app'>
<select v-model="dectecd" multiple>
			<option v-for="op in  options"
			:value="op.value">{{op.text}}</option>
</select>
		<p>{{dectecd}}</p>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
         dectecd:[],
        }
    
    })
</script>

虽然用选择列表＜select>控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，比如不支持搜索，所以常见的解决方案是用div模拟一个类似的控件。