vue基础--表单浅记

最新推荐文章于 2022-10-13 11:20:11 发布

沈江平

最新推荐文章于 2022-10-13 11:20:11 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/weixin_36094484/article/details/74554160

版权

最近两天开始学习vue这个框架，虽然本人算是原生主义，比较喜欢纯js写东西，但优秀的框架总有许多值得学习的地方。技术发展的根本意义，在于让人们更轻松地解决难题，借鉴别人的思想很重要。表单说白了就是接收用户的输入，vue在表单中几乎都用了v-model语法糖实现表单和 vue实例中数据 的双向绑定,单纯用的话，只需要记住两点：
1.v-model绑定的是vue实例中的数据，就像原生表单中每个表单元素都有name来标识一样，vue实例中要有一个对应的属性（变量）来接收/存储表单元素中的数据。对于多个checkbox（复选框）和多选的select，对应的vue属性是一个数组。
2.vue表单可以绑定 动态属性，即vue实例中的属性或用户在v-bind：value=“js表达式”的自定义。

<body>
<div id="app">
<input v-model.trim="message">{{message}}<br/>
<textarea name="commend" v-model.trim="message_area" id="" cols="30" rows="10"></textarea>{{message_area}}
单选框：
<input type="checkbox" id="single_checkbox" v-model="checked1" ><label for="single_checkbox">{{checked1}}</label><br/>
复选框：
<input type="checkbox" id="c1" value="c1" v-model="mul_checkbox"><label for="c1">c1</label>
<input type="checkbox" id="c2" value="c2" v-model="mul_checkbox"><label for="c2">c2</label>
<input type="checkbox" id="c3" value="c3" v-model="mul_checkbox"><label for="c3">c3</label>
<input type="checkbox" id="c4" value="c4" v-model="mul_checkbox"><label for="c4">c4</label>{{mul_checkbox}}<br/>
单选按钮：<br/>
<input type="radio" value="h1" id="r1" v-model="radioBtn" ><label for="r1"></label>
<input type="radio" value="h2" id="r2" v-model="radioBtn" ><label for="r2"></label><br/>
单选列表：
<select name="selectOne" v-model="selectSin">
<option value="q1">q1</option>
<option value="q2">q2</option>
<option value="q3">q3</option>
<option value="q4">q4</option>
</select><br/>
多选：
<select name="selectMul" multiple v-model="selectMul">
<option >a1</option>
<option >a2</option>
<option >a3</option>
<option >a4</option>
</select><br/>
动态选项：<br/>
<select v-model="dyn_selected">
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>{{dyn_selected}}
<p>以上表单的值都是写死的（在页面上的静态字符或布尔值）,可以动态绑定到vue实例的一个属性上，不而是页面的静态字符</p>
复选框：(true-value/false-value)<br/>
<input type="checkbox" v-model="dyn_checkbox" :true-value="check_a" :false-value="check_b">{{dyn_checkbox}}<br/>
单选框：（v-bind:property）<br/>
<input type="radio" v-model="dyn_radio" :value="radio_a">{{dyn_radio}}<br/>
selectLit:(option---:object)<br/>
<select v-model="dyn_select">
<option :value="{node:'a'}">a</option>
<option :value="{node:'b'}">b</option>
<option :value="{node:'c'}">c</option>
<option :value="{node:'d'}">d</option>
<option :value="{node:'e'}">e</option>
</select>{{dyn_select}}<br/>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
check_a:'wahaha',
check_b:'wakaka',
radio_a:'asdadw',
message:'lalala',
message_area:'hihihi',
checked1:false,
mul_checkbox:[],
radioBtn:'',
selectSin:'',
selectMul:[],
dyn_selected:'',
options:[{text:'selectA',value:'selectA'},{text:'selectB',value:'selectB'},{text:'selectC',value:'selectC'}],
dyn_checkbox:this.check_b,
dyn_radio:null,
dyn_select:null
}
})
</script>

------------------------------分割线和原始表单对比--------------------------------------------

<div id="app">
<form action="">
<fieldset>
<legend>表单</legend>
<label for="fn">FirstName:</label><br/><input type="text" name="fn" id="fn"><br />
<label for="ln">LastName:</label><br/><input type="text" name="ln" id="ln"><br />
你喜欢的出行方式：<br/>
<input type="radio" name="goWay" id="go_car" value="car"> <label for="go_car">car</label>
<input type="radio" name="goWay" id="go_bike" value="bike"> <label for="go_bike">bike</label>
<input type="radio" name="goWay" id="go_train" value="train"> <label for="go_train">train</label>
<input type="radio" name="goWay" id="go_plane" value="plane"> <label for="go_plane">plane</label><br/>
你喜欢的女星：<br/>
<input type="checkbox" name="girls" id="kat" value="Kat"> <label for="kat">Kat</label>
<input type="checkbox" name="girls" id="sherry" value="Sherry"> <label for="sherry">Sherry</label>
<input type="checkbox" name="girls" id="emily" value="Emily"> <label for="emily">Emily</label>
<input type="checkbox" name="girls" id="nina" value="Nina"> <label for="nina">Nina</label><br/>
你喜欢的电影类型：<br/>
<select name="movies" id="movie_type">
<option value="funny">fun</option>
<option value="love">love</option>
<option value="cartoon">cartoon</option>
<option value="sad">sad</option>
</select><br/>
你的一些建议：<br/>
<textarea name="commend" id="commend" cols="30" rows="10"></textarea>
</fieldset>
</form>
</div>