sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

Vue基础之表单Form(一)
https://blog.csdn.net/qq_41720578/article/details/124150082

表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。例如下面例子:

  1. <div id="app">
  2. <input type="text" v-model="message" placeholder="请输入....">
  3. <p>{{message}}</p>
  4. </div>
  5. <script>
  6. var vm=new Vue({
  7. el:'#app',
  8. data:{
  9. message:'你好 hellow world!'
  10. }
  11. })
  12. </script>

在输入框输入的同时,{{ message } }也会实时将内容渲染在视图中。

对于文本域textarea也是同样的用法:

  1. <div id="app">
  2. <textarea type="text" v-model="text" placeholder="请输入...."></textarea>
  3. <p>输入的内容是:</p>
  4. <p style="white-space:pre">{{text}}</p>
  5. </div>
  6. <script>
  7. var vm=new Vue({
  8. el:'#app',
  9. data:{
  10. text:'你好 hellow world!'
  11. }
  12. })
  13. </script>

注:

white-space属性值

  1.     normal:忽略多余的空白,只保留一个空白(默认);
  2.     pre:保留空白(行为方式类似于html中的pre标签);
  3.     nowrap:只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。
  4.     pre-wrap:保留空白符序列,正常地进行换行;
  5.     pre-line:合并空白符序列,保留换行符;
  6.     inherit:从父元素继承white-space属性的值

使用v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性,对于在<textarea></textarea>之间插入的值,也不会生效.使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发史新。如果希望总是实时更新,可以用@input来替代v-model.事实上,v-model也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。例如下面的示例: 

  1. <div id="app">
  2. <input type="text" @input="handInput" placeholder="请输入....">
  3. <p>输入的内容是:</p>
  4. <p style="white-space:pre">{{text}}</p>
  5. </div>
  6. <script>
  7. var vm=new Vue({
  8. el:'#app',
  9. data:{
  10. text:'你好 hellow world!'
  11. }
  12. methods:{
  13. handInput:function(e){
  14. this.text=e.target.value;
  15. }
  16. }
  17. })
  18. </script>

e是一个vue对象--->input { target: input, isTrusted: true, isComposing: false, inputType: "insertText", data: "2", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }可以看到target中才是一个js对象。

单选按钮:

单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为否时不选,例如:

  1. <div id="app">
  2. <input type="radio" value="man" :checked="picked">
  3. </div>
  4. <script>
  5. var vm=new Vue({
  6. el:'#app',
  7. data:{
  8. picked:true
  9. }
  10. })
  11. </script>

如果是组合使用来实现互斥选择的效果,就需要v-model配合value来使用:

  1. <div id="app">
  2. <input type="radio" value="man" v-model="picked" id='man'>
  3. <label for='man'>man</label>
  4. <input type="radio" v-model="picked" value="woman" id='woman'><br/>
  5. <label for='woman'>woman</label>
  6. </div>
  7. <script>
  8. var vm=new Vue({
  9. el:'#app',
  10. data:{
  11. picked:''
  12. }
  13. })
  14. </script>

复选框

复选框也分单独使用和组合使用,不过用法稍与单选不同。复选框单独使用时,用v-model来绑定一个布尔值,例如:

  1. <div id='app'>
  2. <input type="checkbox" v-model="checked" id="checked">
  3. <p>{{checked}}</p>
  4. <div>
  5. <script>
  6. var app=new Vue({
  7. el:'#app',
  8. data:{
  9. checked:true
  10. }
  11. })
  12. </script>

 在勾选时,数据checked的值变为了true,label中渲染的内容也会更新。组合使用时,也是v-model与value一起,多个勾选框都绑定到同一个数组类型的数据,value的值在数组当中,就会选中这一项。这一过程也是双向的,在勾选时,value的值也会自动push到这个数组中,示例代码如下:

  1. <div id='app'>
  2. <input type="checkbox" v-model="checked" value="html" id="html">
  3. <label for="html">html</label>
  4. <input type="checkbox" v-model="checked" value="js" id="js">
  5. <label for="js">js</label>
  6. <input type="checkbox" v-model="checked" value="css" id="css">
  7. <label for="css">css</label>
  8. <template v-for="i in checked">
  9. <p>{{i}}</p>
  10. </template>
  11. </div>
  12. <script>
  13. var vm=new Vue({
  14. el:'#app',
  15. data:{
  16. checked:[]
  17. }
  18. })
  19. </script>

选择列表:

选择列表就是下拉选择器,也是常见的表单控件,同样也分为单选和多选两种方式。先看一下单选的示例代码:

  1. <div id='app'>
  2. <select v-model="dectecd">
  3. <option>html</option>
  4. <option value='js'>js</option>
  5. <option>css</option>
  6. </select>
  7. <p>{{dectecd}}</p>
  8. </div>
  9. <script>
  10. var vm=new Vue({
  11. el:'#app',
  12. data:{
  13. dectecd:'',
  14. }
  15. })
  16. </script>

<option>是备选工页,如果含有value属性,v-model就会优先匹配value的值:如果没有,就会直接匹配<option>的text,比如选中第二项时,selected的值是js,而不是JavaScript。

给<selected>添加属性multiple就可以多选了,此时v-model绑定的是一个数组,与复选框用法类似,示例代码如下:

  1. <div id='app'>
  2. <select v-model="dectecd" multiple>
  3. <option>html</option>
  4. <option value='js'>js</option>
  5. <option>css</option>
  6. </select>
  7. <p>{{dectecd}}</p>
  8. </div>
  9. <script>
  10. var vm=new Vue({
  11. el:'#app',
  12. data:{
  13. dectecd:[],
  14. }
  15. })
  16. </script>

在业务中,<option>经常用v-for动态输出,value和text也是用v-bind来动态输出的,例如:

  1. <div id='app'>
  2. <select v-model="dectecd" multiple>
  3. <option v-for="op in options"
  4. :value="op.value">{{op.text}}</option>
  5. </select>
  6. <p>{{dectecd}}</p>
  7. </div>
  8. <script>
  9. var vm=new Vue({
  10. el:'#app',
  11. data:{
  12. dectecd:[],
  13. }
  14. })
  15. </script>

虽然用选择列表<select>控件可以很简单地完成下拉选择的需求,但是在实际业务中反而不常用,因为它的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,比如不支持搜索,所以常见的解决方案是用div模拟一个类似的控件。

posted on 2023-03-16 16:33  sunny123456  阅读(405)  评论(0编辑  收藏  举报