vue表单元素

vue表单元素:

    <div id="demo">
		<div v-show="flag"><h3>表单元素</h3></div>
		<label for="input1">input元素:</label>
		<input type="text" placeholder="请输入" id="input1"  v-model.lazy="input1"/><span v-html="input1"></span><br/>
		<label for="textarea1">textarea元素:</label>
		<textarea placeholder="请输入" id="textarea1" v-model="textarea1"></textarea><span v-html="textarea1"></span><hr/>
		
		<label for="checkbox1">单个checkbox元素:</label>
		<input type="checkbox" id="checkbo1" v-model="checkbox1"/><span v-html="checkbox1"></span><br/>
		<label >多个checkbox元素:</label>
		<input type="checkbox" value="桌球" id="checkbo2" name="桌球" v-model="checkboxArr"/><span >桌球</span>	<!-- checked 会根据v-model的值选择  -->
		<input type="checkbox" value="music" id="checkbo3"  name="music" v-model="checkboxArr"/><span >music</span>
		<input type="checkbox" value="跑步" id="checkbo4"  name="跑步" v-model="checkboxArr"/><span>跑步</span><br/>
		你选择的是：<span v-html="checkboxArr"></span><hr/>
		
		<label >单选元素：</label>
		<input type="radio" id="male" value="男" name="xb" v-model="radio1"/><span> 男</span>  <!-- checked 会根据v-model的值选择  -->
		<input type="radio" id="female" value="女" name="xb" v-model="radio1"/><span> 女</span><br/>
		你选择的是：<span v-html="radio1"></span><hr/>
		
		<label>select列表</label>
		<select v-model="selected1" name="website">
			<option value="">请选择一个网站</option>
			<option value="https://www.baidu.com">百度</option>
			<option value="https://cn.vuejs.org">vue</option>
			<option value="www.w3school.com.cn">w3c</option>
		</select><br/>
		你选择的是：<span v-html="selected1"></span><hr/>
	</div>
	<script type="text/javascript">
		var vm = new Vue({	
			el: '#demo',	
			data: {
				flag: true,
				input1: "input",
				textarea1: "textarea",
				checkbox1: false,
				checkboxArr: ['music'],
				radio1: '女',
				selected1: '',
			},
			methods: {
				searchDict: function(it) {
			          //JS中，If 语句判断为false的变量值为： false, 0, 0.0, null, undefined和空字符串,其他变量值判断为true: true, 1, [任何字串/数字]
			          if (this.sdict && it.name.indexOf(this.sdict) === -1 && it.sex.indexOf(this.sdict) === -1) {	
			        	  return false; 	//不满足条件不显示
			          }else if (this.sdict) {
			        	  return true;	//满足条件显示
			          }  
			          return true; //初始化显示所有
			    }
			}
		});
	</script>

结果：

修饰符  格式：v-model.修饰符

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步。
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入。