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 事件：它延遲「寫入」底層數據。