Vue深度学习（2）

Text

可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

<div id="app">
    <span>Message is:{{msg}}</span><br />
    <input type="text" v-model="msg" placeholder="edit me">
</div>

Js代码

var vm = new Vue({
    el: '#app',
    data: {
        msg:"Hello world"
    }
})

其中placeholder为默认显示提示。

渲染为：

Checkbox

多个勾选逻辑值，如下代码：

<div id="app">
    <span>checkbox value is {{msg}}</span>
    <input type="checkbox" v-model="msg" v-bind:true-value="a" v-bind:false-value="b">
</div>

var vm = new Vue({
    el:"#app",
    data:{
        a:"a",
        b:"b"
    }
})

Radio

<div>
<span>radio value is:{{pick}}</span>
<input type="radio" v-model="pick" v-bind:value="a">
</div>

var vm = new Vue({
  el: 'div',
  data: {
      a:"a"
  }
})

select

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

JS代码

var vm = new Vue({
    el:"#app",
    data:{
        selected:"A",
        options:[
            {value:"A",text:"One"},
            {value:"B",text:"Two"},
            {value:"C",text:"Three"}
        ]
    }
})

参数特性

lazy

在默认情况下，v-model 在input 事件中同步输入框值与数据，可以添加一个特性 lazy，从而改到在 change 事件中同步：

如下实例，当在文本框中输入完成以后，才更新内容：

<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" lazy>

number

如果想自动将用户的输入保持为数字，可以添加一个特性 number：

<input v-model="age" number>

debounce

debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

<input v-model="msg" debounce="500">

注意 debounce 参数不会延迟 input 事件：它延迟“写入”底层数据。