我的 Vue.js 学习日记 （八） - input 与 v-model

上节回顾

上节我学习了事件与修饰符，翻过去瞅一眼~
prevent修饰符用在form上，阻止表单提交
stop阻止事件的出向外传播
capture在正常传播时“插队”
once一次性
exact出现后可以对按键做限制
···

本节目标

今天来看表单输入绑定，其实这块之前用过很多次，理解上应该不会很困难。

v-model 与 input

问度娘查了一下input的type，发现还真多！我以为只有button和text···

那么挨个绑定一下试试效果吧

裸绑

html:
<input type="button" v-model="button">
<input type="checkbox" v-model="checkbox">
<!--<input type="file" v-model="file">-->
<input type="hidden" v-model="hidden">
<input type="image" v-model="image">
<input type="password" v-model="password">
<input type="radio" v-model="radio">
<input type="reset" v-model="reset">
<input type="submit" v-model="submit">
<input type="text" v-model="text">

js:
  var vm = new Vue({
    el: '#app',
    data: {
      button: '绑定按钮',
      checkbox: '',
      file: '绑定文件',
      hidden: '绑定隐藏',
      image: '绑定图像',
      password: '绑定密码框',
      radio: 0,
      reset: '绑定重置',
      submit: '绑定提交',
      text: '绑定输入框'
    }
  })

最后输出的html是这样的：

<input type="button" value="绑定按钮">
<input type="checkbox">
<input type="hidden" value="绑定隐藏">
<input type="image" value="绑定图像">
<input type="password">
<input type="radio">
<input type="reset" value="绑定重置">
<input type="submit" value="绑定提交">
<input type="text">

这里看到file被注注释掉了，因为我试了一下，绑定file会报错，大致意思是file是只读的，要帮就帮他的change事件

check只要不是绑定 0 false '' 的话，其他的都是选中状态（包括负数）

radio骄傲突破天际了，绑什么都没有一点反映

值绑

值绑定抛去裸绑中没有出现value的，再刨去文本，只剩下checkbox与radio

html:
<input type="radio" name="rdo" v-model="radio" v-bind:value="rdo1" @change="doSomeThing(radio)">
<input type="radio" name="rdo" v-model="radio" v-bind:value="rdo2" @change="doSomeThing(radio)">
<input type="checkbox" v-model="checkbox" true-value="yes" false-value="no" @change="doSomeThing(checkbox)">
<input type="checkbox" v-model="checkbox" true-value="是" false-value="否" @change="doSomeThing(checkbox)">

js:
  var vm = new Vue({
    el: '#app',
    data: {
      button: '绑定按钮',
      checkbox: '',
      file: '绑定文件',
      hidden: '绑定隐藏',
      image: '绑定图像',
      password: '绑定密码框',
      radio: 0,
      reset: '绑定重置',
      submit: '绑定提交',
      text: '绑定输入框',
      rdo1: '买！！',
      rdo2: '不能买！'
    },
    methods: {
      doSomeThing (msg) {
        console.log(msg)
      }
    }
  })

输出：···算了，输出不好描述，忘了再来试试

v-model 与 select

静态绑定

大致看了一下，应该是这个意思

单选 绑 字段

多选 绑 数组

不过我把对象绑给了单选试了试，也可以绑上不报错，不过输出自动变成了字符串

html:
<select v-model="obj" @change="doSomeThingAgain(obj)">
  <option>零</option>
  <option value="1">一</option>
  <option value="2">二</option>
  <option value="3">三</option>
</select>

<select v-model="items" multiple style="width: 50px;" @change="doSomeThingAgain(items)">
  <option>A</option>
  <option value="2">B</option>
  <option>C</option>
</select>

js:
var vm = new Vue({
    el: '#app',
    data: {
      obj: {
        content: '',
        value:''
      },
      items: []
    },
    methods: {
      doSomeThingAgain (item) {
        console.log(item)
      }
    }

选择后输出：

["C", __ob__: Observer]
(2) ["2", "C", __ob__: Observer]
(3) ["A", "2", "C", __ob__: Observer]

零
1
2
3

可以看出，当存在value时，v-model取value，不存在时取文本

v-for 动态选项

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>

这个其实原理是一样的，输出后一样是<option value="1">一</option>这种

所以肯定还是取value值

又见修饰符

lazy 由按一下变一下改为本次输入结束变一下

html:
<input type="text" v-model.lazy="msg">
<h3>{{msg}}</h3>

js:
msg: ''

基于以上代码，在没有lazy修饰之前，h3的变化与我的输入是同步变化的

.lazy使他们的同步变为如：按下enter 焦点离开 时触发

number 取值时候直接是数字类型

html:
<input type="number" v-model.number="num">
<input type="number" v-model="numtxt">

js:
num: '',
numtxt: ''

输出：

vm.numtxt
"2"
vm.num
22

可以看出来一个带双引号，一个不带

trim 过滤首尾空格

trim很常见，在pc开发桌面应用也常常用到，所以过~

小节

今天主要是看了v-model与一些input进行绑定的一些用法，不早了，睡觉