<vue 基础知识 9、v-model使用 input、radio、checkbox、select、修饰符>

代码结构

一、     01-v-model的基本使用

Vue中使用v-model指令来实现表单元素和数据的双向绑定

1、效果  

2、代码

01-v-model的基本使用.html

二、     02-v-model结合radio类型

1、 效果

2、代码

02-v-model结合radio类型.html

	
		
		
	
	

		

			
				男
			
			
				女
			
			
选择的性别是: {{sex}}
		

		
		

	

三、03-v-model结合checkbox类型

1、效果

2、代码

03-v-model结合checkbox类型.html

	
		
		
	
	

		

			篮球
			足球
			乒乓球
			羽毛球
			
爱好是: {{hobbies}}
		

		
		

	

四、04-v-model结合select类型

1、效果

注：下面的多选框需要按住ctrl多选

2、代码

04-v-model结合select类型.html

	
		
		
	
	

		

			
			
				苹果
				香蕉
				榴莲
				葡萄
			
			
您选择的水果是: {{fruit}}

			
			
				苹果
				香蕉
				榴莲
				葡萄
			
			
您选择的水果是: {{fruits}}
		

		
		

	

五、05-v-model修饰符的使用

1、效果

注：（1）当上面输入时只有光标离开输入框，下面的值才会改变。

   （2）只能输入数字

   （3）输入的内容去掉前后的空格

2、代码

05-v-model修饰符的使用.html

	
		
		
	
	

		

			
			
			
{{message}}


			
			
			
{{age}}-{{typeof age}}

			
			
			
您输入的名字:{{name}}