Vuejs——Vuejs与form元素

Posted 岁月如歌(丁盛)

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuejs——Vuejs与form元素相关的知识,希望对你有一定的参考价值。

 

目录(?)[+]

 

资料来于官方文档:

http://cn.vuejs.org/guide/forms.html

本文是在官方文档的基础上,更加细致的说明,代码更多更全。

简单来说,更适合新手阅读

 

 

 

 

(二十三)表单绑定

①常见绑定方法:

【1】文本输入框绑定;

【2】textarea绑定(类似【1】);

【3】radio选中值绑定;

【4】checkbox绑定(自动捆绑数组,无需name);

【5】select绑定;

【6】select multiple多选选中框绑定;

【7】动态绑定(以上不同类型但同一个值可以互动);

【8】checkbox选中和未选中赋予不同的值(主要是针对不选中状态);

【9】checkbox,radio,select选中状态的值动态绑定(主要是指值动态绑定对象或者是vm实例的属性,例如data里的某个属性,或者是computed的某个值);

 

如代码:

 

[html] view plain copy
 
 技术分享技术分享
  1. <div id="app">  
  2.     <input type="text" v-model="text"/>  
  3.     <div>{{text}}</div>  
  4.     <div>——————————————</div>  
  5.     <textarea style="width:200px;height:100px;" v-model="textarea"></textarea>  
  6.     <div>{{textarea}}</div>  
  7.     <div>——————————————</div>  
  8.     <label><input type="checkbox" v-model="checkbox"/>左边选中右边则为true:{{checkbox}}</label>  
  9.     <div>——————————————</div>  
  10.     <label><input type="checkbox" value="firstCheckbox" v-model="checkboxes">firstCheckbox</label><br/>  
  11.     <label><input type="checkbox" value="secondCheckbox" v-model="checkboxes">secondCheckbox</label><br/>  
  12.     <label><input type="checkbox" value="thirdCheckbox" v-model="checkboxes">thirdCheckbox</label><br/>  
  13.     <div>以上选中的value情况为:{{checkboxes}}</div>  
  14.     <div>以上选中的value情况为(以json格式显示,这里使用了json过滤器):{{checkboxes|json}}</div>  
  15.     <div>——————————————</div>  
  16.     <label><input type="radio" value="A" v-model="radio"/>value = A</label><br>  
  17.     <label><input type="radio" value="B" v-model="radio"/>value = B</label><br>  
  18.     <div>{{radio}}</div>  
  19.     <div>注意,这里的v-model的值应该被注册到data里面,否则会红字警告(事实上,所有的都应该也这么做)</div>  
  20.     <div>——————————————</div>  
  21.     <select v-model="select">  
  22.         <option>默认值,option不设value</option>  
  23.         <option value="B">value的值设为B</option>  
  24.         <option selected value="C">默认选择这个,value设为C</option>  
  25.     </select>  
  26.     <div>{{select}}</div>  
  27.     <div>同样,这里不注册也会被报错</div>  
  28.     <div>——————————————</div>  
  29.     <div>以下是select的多选,按住ctrl可以连续选,按住shift选择区间</div>  
  30.     <select style="width:200px;height:100px;overflow: hidden;" v-model="multiple" multiple>  
  31.         <option value="A">A</option>  
  32.         <option value="B">B</option>  
  33.         <option value="C">C</option>  
  34.         <option value="D">D</option>  
  35.         <option value="E">E</option>  
  36.     </select>  
  37.     <div>多选选中的值是:{{multiple}}</div>  
  38.     <div>注意,这个多选select框是默认带y轴的滚动条的</div>  
  39.     <div>——————————————</div>  
  40.     <div>动态渲染,checkbox和多选select框是互相影响的</div>  
  41.     <label><input type="checkbox" value="A" v-model="Dynamic">A</label><br/>  
  42.     <label><input type="checkbox" value="B" v-model="Dynamic">B</label><br/>  
  43.     <label><input type="checkbox" value="C" v-model="Dynamic">C</label><br/>  
  44.     <select style="width:200px;height:100px;overflow: hidden;" v-model="Dynamic" multiple>  
  45.         <option value="A">A</option>  
  46.         <option value="B">B</option>  
  47.         <option value="C">C</option>  
  48.     </select>  
  49.     <div>选中情况是:{{Dynamic}}</div>  
  50.     <div>——————————————</div>  
  51.     <div>选中和选中的值自定义的checkbox</div>  
  52.     <label><input type="checkbox" v-bind:true-value="differentValues.t" v-bind:false-value="differentValues.f"  
  53.                   v-model="different">true/false</label><br/>  
  54.     <div>different value: {{different}}</div>  
  55.     <div>注意,以上不能像普通checkbox那么样,用一个数组作为多个checkbox的v-model的变量,且其值是绑定与vm实例的某个属性;  
  56.         因此,不能在v-bind里的值是一个字符串,但可以是一个对象,例如{a:1}这样(当然,这个时候显示的值也是一个对象了)  
  57.     </div>  
  58.     <div>——————————————</div>  
  59.     <div>自定义之的radio</div>  
  60.     <label><input type="radio" v-bind:value="text" v-model="customize"/>值为1</label>  
  61.     <label><input type="radio" v-bind:value="textarea" v-model="customize"/>值为1</label>  
  62.     <div>{{customize}}</div>  
  63.     <div>同样,值可以是vm的一个属性或者是一个对象,另外,同样有效的还有select。(主要就这三个有选中状态,除此之外虽然例如Date类型也有选中,但是意义不大)</div>  
  64.     <div>——————————————</div>  
  65. </div>  
  66. <script>  
  67.     var vm = new Vue({  
  68.         el: ‘#app‘,  
  69.         data: {  
  70.             text: "默认有输入内容",  
  71.             textarea: "这里是多行文字\n第二行,\\n是换行符,但在字符串里显示为空格",  
  72.             checkboxes: [],  
  73.             radio: "",  
  74.             select: "",  
  75.             multiple: "",  
  76.             Dynamic: {},  
  77.             different: "",  
  78.             differentValues: {  
  79.                 t: "true",  
  80.                 f: "false"  
  81.             },  
  82.             customize: ‘‘  
  83.         }  
  84.     })  
  85. </script>  


 


②添加参数:

参数

说明

lazy

非实时更新,而是focus状态结束后更新

number

将值自动转为number类型输出

debounce

延迟若干毫秒再更新数值

 

【1】lazy

在取消focus状态后才更新值,而不是按键按下时就更新值。

对文本输入框和textarea都有效

 

如代码:

 

[html] view plain copy
 
 技术分享技术分享
  1. <input type="text" v-model="text" lazy/>  
  2. <div>{{text}}</div>  

 


【2】number

将输入的值自动转为number类型,如果转后为NaN类型,则返回原值;

如代码:

[html] view plain copy
 
 技术分享技术分享
  1. <input type="text" v-model="text" number/>  
  2. <div>{{text}}</div>  
  3. <div>{{typeof text}}</div>  

 

如果加上number这个参数,那么输入数字时,则提示类型为string,加上之后,纯数字会提示number类型;

 

 

【3】debounce=”毫秒数”

当值连续若干毫秒没有变化时,触发变量的值的改变;

如代码:

[html] view plain copy
 
 技术分享技术分享
  1. <input type="text" v-model="text" debounce="1000"/>  
  2. <div>{{text}}</div>  

 

当我以500ms的时间差依次输入1,2,3,4,5,6这六个数字时,text的值不会被更新;

当我停止输入有1000ms时,text值才会被更新;

因此,适合类似ajax等高消耗操作。









以上是关于Vuejs——Vuejs与form元素的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs2 - 如何将两个数组中的元素与计算属性进行比较?

Vuejs - 花式渲染目标元素

VueJS Jquery 数据表集成:将方法附加到动态 html 元素

Vuejs 属性或方法未在实例上定义,但在渲染期间引用

通过 VueJS 选择 DOM 元素

使用 VueJS 动态编译和挂载元素