Vuejs——（6）Vuejs与form元素

深藏阁楼爱情的钟 2022-07-18 00:14 411阅读 0赞

资料来于官方文档：

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的某个值）；

如代码：

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

②添加参数：




















参数

说明

lazy

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

number

将值自动转为number类型输出

debounce

延迟若干毫秒再更新数值

【1】lazy

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

对文本输入框和textarea都有效

如代码：

  1. <input type="text" v-model="text" lazy/>
  2. <div>{
  3.    {text}}</div>

【2】number

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

如代码：

  1. <input type="text" v-model="text" number/>
  2. <div>{
  3.    {text}}</div>
  4. <div>{
  5.    {typeof text}}</div>

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

【3】debounce=”毫秒数”

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

如代码：

  1. <input type="text" v-model="text" debounce="1000"/>
  2. <div>{
  3.    {text}}</div>

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读