Vuejs表单与v-model_v-model="form[item.model]-CSDN博客

本文链接：https://blog.csdn.net/qq_39188150/article/details/88953505

1、v-model的理解:

v-model指令实际是一个语法糖,当使用v-model指令双向绑定的时候,做了两件事情：
一件是v-bind(绑定了DATA数据),一件是v-on(声明了表单事件,每个表单的事件可能不同,
但是本质都是把当前表单的值赋给data里面的变量(绑定的这个对象))

2、测试代码

<body>
<div id="app">
	<p>单选按钮(单独)</p>
	<label for="radioD">中国</label>
	<input type="radio" :checked="radioD" id="radioD"/>
	
	<p>单选按钮(多个互斥)</p>
	<label for="radioS1">中国</label>
	<input type="radio"  v-model="radioS" value="china" id="radioS1"/>
	<label for="radioS2">日本</label>
	<input type="radio"  v-model="radioS" value="japen" id="radioS2"/>
		
		
    <p>多选按钮(单独)</p>
    <label for="checkD">中国</label>
    <input type="checkbox" v-model="checkD" id="checkD"/>
    	
    <p>多选按钮(多个)</p>
    <label for="checkS1">中国</label>
    <input TYPE="checkbox" v-model="checkS" value="china" id="checkS1"/>
    <label for="checkS2">日本</label>
    <input TYPE="checkbox" v-model="checkS" value="japen" id="checkS2"/>
    
	<p>选择框(单选)</p>
    <select v-model="selectD">
      <option value="js">js</option>
      <option value="html">html</option>
      <option value="css">css</option>
    </select>
    
    <p>选择框(多选)</p>
    <select v-model="selectS" multiple>
       <option value="js">js</option>
       <option value="html">html</option>
       <option value="css">css</option>
    </select>
    
    <p>选择框(多选动态)</p>
    <select v-model="selectA">
      <option v-for="s in selectArray" :value="s.value">
        {{s.text}}
      </option>
    </select>
    
    <p>多选按钮(动态绑定)</p>
    <label for="radioDT">俄罗斯</label>
    <input type="radio" v-model="radioDTM" value="radioDTV" id="radioDT"/>
    {{radioDTM}}
    {{radioDTV}}
    
    <p>多选按钮(动态绑定)</p>
    <label for="radioDT">俄罗斯</label>
    <input type="checkbox" v-model="checkDTM" :true-value="checkDTV1" :false-value="checkDTV2">
    {{checkDTM}}
    {{checkDTV1}}
    {{checkDTV2}}
    
    <p>选择列表(动态绑定)</p>
    <select v-model="selectDT">
      <option v-for="s in selectDTArray" :value="s.value">{{s.text}}</option>
    </select>
    {{selectDT}}
    {{selectDM}}
    
</div>
</body>
<script type="text/javascript">
	var app=new Vue({
	    el:"#app",
	    data:{
	      radioD:false,
	      radioS:'china',
	      checkD:false,
	      checkS:[],
	      selectD:"",
	      selectS:[],
	      selectA:"",
	      selectArray:[
	        {text:'hhh',value:'hhh'},
	        {text:'sss',value:'sss'},
	        {text:'ooo',value:'ooo'}
	      ],
	      radioDTM:"",
	      radioDTV:"",
	      checkDTM:"",
	      checkDTV1:"1",
	      checkDTV2:"2",
	      selectDTArray:[
	         {text:"html",value:"html"},
	         {text:"css",value:"css"},
	         {text:"js",value:"js"}
	       ],
	      selectDT:"",
	      selectDM:""
	    }
	});
</script>

3、单选按钮(单独):

div(视图):

	<p>单选按钮(单独)</p>
	<label for="radioD">中国</label>
	<input type="radio" :checked="radioD" id="radioD"/>

js(data模型):

   radioD:false

理解:

用v-bind指令绑定checked属性和radioD数据变量,默认为不选中，当元素的checked属性所绑定的变量为true时,则为选中状态。

4、单选按钮(多个互斥)

div(视图):

<label for="radioS1">中国</label>
<input type="radio"  v-model="radioS" value="china" id="radioS1"/>
<label for="radioS2">日本</label>
<input type="radio"  v-model="radioS" value="japen" id="radioS2"/>

js(data模型):

   radioS:'china',

理解:

v-model是一种语法糖,其实干了两件事情：
(1)、v-bind将元素的value属性和数据变量radioS进行绑定(读取,将数据变量读取到input的value属性)
(2)、@input事件,将当期元素的input事件传到方法里面,将当前元素的value值赋值给数据变量radioS(写入,将input的value值赋值给radioS)
以上两个动作，实现了双向绑定

当元素的value值和它所绑定的数据变量radioS值相等时,则为选中状态

5、单选按钮(单独):

div(视图):

<p>多选按钮(单独)</p>
<label for="checkD">中国</label>
<input type="checkbox" v-model="checkD" id="checkD"/>

js(data模型):

   checkD:false

理解:

我的理解是v-model指令做了两件事情,第一个是将元素的value值和checkD 进行绑定,还有一个就是@checked的时候，将元素的checked值赋值给checkD，从而实现双向绑定。

6、多选按钮(多个):

div(视图):

<p>多选按钮(多个)</p>
<label for="checkS1">中国</label>
<input TYPE="checkbox" v-model="checkS" value="china" id="checkS1"/>
<label for="checkS2">日本</label>
<input TYPE="checkbox" v-model="checkS" value="japen" id="checkS2"/>

js(data模型):

checkS:[]

理解:

v-model做的事情同上,当元素的value值存在于checkS数组时,状态则为选中。

以上几个例子我的总结:

单独一个选项的,不管是单选框还是多选框,都可以直接给绑定的数据赋值为bool类型,通过true和false来判断是否选中。
多个选项的,则需要给绑定的数据赋值为字符串(当前元素的value值)，匹配时就是选中状态。

7、单选按钮(动态绑定):

div(视图):

  <p>单选按钮(动态绑定)</p>
  <label for="radioDT">俄罗斯</label>
  <input type="radio" v-model="radioDTM" value="radioDTV" id="radioDT"/>
  {{radioDTM}}
  {{radioDTV}}

js(data模型):

radioDTM:false,
radioDTV:123

理解:

v-model做的事情同上,当元素选中的时候,将元素的value值,赋值给v-model绑定的变量,所以radioDTM会变成123

8、复选按钮(动态绑定):

div(视图):

<p>复选按钮(动态绑定)</p>
<label for="radioDT">俄罗斯</label>
<input type="checkbox" v-model="checkDTM" :true-value="checkDTV1" :false-value="checkDTV2">

js(data模型):

checkDTM:"",
checkDTV1:"1",
checkDTV2:"2",

理解:

v-model做的事情同上,当元素选中时,radioDTM===checkDTV1,没选中时radioDTM===checkDTV2


所谓动态绑定,就是v-bind:value代理普通的value属性

总结:

  （1）、v-model是专用于表单元素的指令,是个语法糖，通过读取和写入来实现双向绑定。
  （2）、单选和复选的区别在于v-model绑定的是数组还是单个值