vue表单
2020-10-12 本文已影响0人
lucky_yao
text,password,textarea----->v-model---》value
radio,checkbox,select----->v-model checked/v-bind:value
表单修饰符：
.lazy:失去焦点（change事件同步）或者回车的时候才会同步数据
.number:变成数值
.trim:去掉前后空格，不会去掉中间空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
{{msg}}
<hr>
<textarea v-model="textar"></textarea>
{{textar}}
<hr>
<input type="checkbox" id='one' v-model="check" />
<label for="one">{{check}}</label>
<hr>
<input type="checkbox" id='one' v-model="checka" />
<label for="one" v-text="checka?'同意':'反对'">{{check}}</label>
<hr>
<input type="checkbox" id='two' v-model="checkb" true-value='yes' false-value='no' />
<label for="two">{{checkb}}</label>
<hr>
你喜欢的明星：
<input type="checkbox" id='yb' value="王一博" v-model="start" />
<label for="onea">王一博</label>
<input type="checkbox" id='xz' value="肖战" v-model="start" />
<label for="onea">肖战</label>
<input type="checkbox" id='yx' value="罗云熙" v-model="start" />
<label for="onea">罗云熙</label>
<h1>我喜欢的{{start}}</h1>
<hr>
<input type="radio" name="sex" id="vm" value="girl" v-model="xb" />
<label for="vm">女</label>
<input type="radio" name="sex" id="m" value="boy" v-model="xb" />
<label for="m">男</label>
{{xb}}
<hr>
<h1>下拉菜单</h1>
<select v-model="selected" style="padding: 4px;">
<option disabled value="">请选择</option>
<option>王一博</option>
<option>肖战</option>
<option>罗云熙</option>
</select>
<span>喜欢: {{ selected }}</span>
<hr>
<h1>多选下拉菜单</h1>
<select v-model="selecteds" multiple style="padding: 4px;">
<option disabled value="">请选择</option>
<option>王一博</option>
<option>肖战</option>
<option>罗云熙</option>
</select>
<span>喜欢: {{ selecteds }}</span>
<hr>
<h1>循环下拉菜单</h1>
<select v-model="morefor" style="padding: 4px;">
<option v-for="(v,i) in optionlist" :value="v.value">{{v.text}}</option>
</select>
<span>{{ morefor }}</span>
<hr>
<h1>内联对象字面量</h1>
<select v-model="sele">
<option v-bind:value="{ number: 121 }">1231</option>
<option v-bind:value="{ number: 122 }">122</option>
<option v-bind:value="{ number: 123 }">123</option>
</select>
{{sele}}
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '',
textar: '',
check: false,
checka: false,
start: [],
xb: 'girl',
selected: '',
selecteds: [],
morefor: [],
optionlist: [{
text: 'One',
value: 'A'
},
{
text: 'Two',
value: 'B'
},
{
text: 'Three',
value: 'C'
}
],
checkb: 'NO',
sele: ''
}
})
</script>
</html>
