VUE 양식 및 v-model

1. v-model 기본 사용법 2.라디오 상자/버튼 3.확인란/다중 선택 버튼 4.드롭다운 선택 목록 5.양식 입력 바인딩 수정자
폼 컨트롤은 실제 업무에서 흔히 볼 수 있는데 Vue는 v-model 명령을 제공하여 폼 클래스 요소에 양방향으로 데이터를 연결하는 데 사용한다.
1. v-model 기본 용법 사례, 예를 들어 입력 상자에서 사용할 때 입력한 내용이 귀속된 데이터에 실시간으로 비친다.★(1) 폼 컨트롤에 표시된 값은 연결된 데이터에만 의존하고 초기화할 때의value 속성에 관심이 없습니다. 초기화value 속성의 결합을 해제합니다(원시 데이터는 데이터 내용 위주로 비웁니다). (2) <textarea> 사이에 삽입된 값은 적용되지 않습니다(텍스트 필드 덮어쓰기)

			
			
     ：{{name}}
			




						<p>     ：{{ming}}</p>
		</div>
		<script>
			var add = new Vue({
				el:'.add',
				data:{
					lei:'text',
					content:'   ',
					name:'',
					nr:'  ',
					ming:''
				}
			})
		</script>
</code></pre> 
  <p>（3）   v-model  ，     ， Vue        ，            。      ，   @input     v-model</p> 
  <pre><code><div class="add">
			<textarea/>
			<p>{{asfn}}</p>
		</div>
		<script>
			var add = new Vue({
				el:'.add',
				data:{
					asfn:''
				},
				methods:{
					af:function(event){
						this.asfn=event.target.value
					}
				}
			})
		</script>
</code></pre> 
  <p>2.   /  <br/>      v-bind    (  ：        )，    v-model    value   </p> 
  <pre><code><div class="add">
			  :
			 <input type="radio" v-model="dx" value="dx_nr"/>
			 <input type="radio" v-model="dx" value="dx_nrA"/>
			  <input type="radio" v-model="dx" value="dx_nrB"/>
			<p>     ：{{dx}}</p>
		</div>
		<script>
			var add = new Vue({
				el:'.add',
				data:{
					dx:''
				}
			})
		</script>
</code></pre> 
  <p>3.   /    </p> 
  <pre><code><!--   ，        ，   v-model        -->
		<div class="add">
			     :
			  <input type="checkbox" v-model="fx"/>
		</div>
		<script>
			var add = new Vue({
				el:'.add',
				data:{
					fx:true
				}
			})
		</script>
		
		
<!--     ，  v-model value  ,                   ，value       ，       -->			
		<div class="add">
			     :
			  <input type="checkbox" v-model="lists" value="pg"/>
			   <input type="checkbox" v-model="lists" value="bxg"/>
			  <input type="checkbox" v-model="lists" value="xj"/>
			  <input type="checkbox" v-model="lists" value="tz"/>
			  <input type="checkbox" v-model="lists" value="bl"/>
			       {{lists}}
		</div>
		<script>
			var add = new Vue({
				el:'.add',
				data:{
					lists:[]
				}
			})
		</script>
</code></pre> 
  <p>4.Vue        </p> 
  <pre><code><!--       
   vue       v-model  ，    ，checkbox value    push       checkData  ，   value v-model。
 -->		
		<div class="app">
			  <input type="checkbox" v-model="checkAll"/>
			<ul>
				<li v-for="good in goods">
					{{good.name}}<input type="checkbox" v-model="checkList" :value="good.name"/>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'.app',
				data:{
					goods:[
						{name:'  '},
						{name:'  '},
						{name:'   '},
						{name:'  '},
						{name:'  '},
						{name:'  '}
					],
					checkAll:false,
					checkList:[]
				},
				methods:{
					All:function(){
						var _this = this;
						if(!_this.checkAll){
							//    
							_this.goods.forEach(function(element){
								_this.checkList.push(element.name);  //      push checkList   
							})
						}else{
							//     
							_this.checkList=[];
						}
					}
				}
			})
		</script>
		
	<!--   
	    vue input     v-model          ，                	         
	-->		
		<div class="app">
			  <input type="checkbox" v-model="All"/>
			<ul>
				<li v-for="book in books">
					{{book.name}}<input type="checkbox" v-model="book.zt"/>
				</li>
			</ul>
		</div>		
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					books:[
						{name:'  ',zt:false},
						{name:'  ',zt:false},
						{name:'  ',zt:false},
						{name:'  ',zt:false},
						{name:'  ',zt:false},
						{name:'  ',zt:false}
					],
					All:false,
					
				},
				methods:{
					All_dj:function(){
						if(this.All){
							this.books.forEach(function(element){
								element.zt=false;
							})
						}else{
							this.books.forEach(function(element){
								element.zt=true;
							})
						}
					}
				}
			})
		</script>
</code></pre> 
  <p>5.      ---------------              ，<br/> ★★★</p>     ，     value    v-model        value。             text。 
  <pre><code><div class="app">
			<select>
				<option v-for="good of goods">{{good.name}}</option>
			</select>
		</div>		
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					goods:[
						{name:'  '},
						{name:'  '},
						{name:'  '},
						{name:'  '}
					]
				}
			})
		</script>
</code></pre> 
  <p>5-2.      ---------------           multiple       <br/>   ：  Ctrl+      </p> 
  <pre><code><div class="app">
			<select v-model="name" multiple="multiple">
				<option v-for="good of goods">{{good.name}}</option>
			</select>
			     ❀：{{name}}
		</div>		
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					goods:[
						{name:'  '},
						{name:'  '},
						{name:'  '},
						{name:'  '}
					],
					name:[]
				}
			})
		</script>
</code></pre> 
  <p>6.         </p> 
  <pre><code>		<div class="app">
			<!--.lazy     (input      ，p       )-->
			<input type="text" v-model.lazy="hh"/>  
			<p>   ：{{hh}}</p>
			
			<!--.number     -->
			<input type="number" v-model.number="money"/>  
			<p>  ：{{money+10}}</p>
			
			<!--       ，  v-model    trim    ，                 -->
			<input type="text" v-model.trim="info"/>  
			<p>  ：{{info}}</p>
		</div>		
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					hh:'',
					money:'',
					info:''
				}
			})
		</script>
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>