Vue的表單輸入綁定

表單輸入綁定

上一篇：Vue的事件處理方法：https://segmentfault.com/a/11...
下一篇：Vue的組件：https://segmentfault.com/a/11...

基礎用法

文本

<input v-model="message" type="text" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

複選框

單個複選框

<div class="exp">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>
<script>
    new Vue({
        el:".exp",
        data:{
            checked:'true'
        }
    })
</script>

多個複選框，添加到數組裏

<div class="exp">
    <input type="checkbox" id="checkbox" value="今天" v-model="checked">
    <input type="checkbox" id="checkbox" value="明天" v-model="checked">
    <input type="checkbox" id="checkbox" value="昨天" v-model="checked">
    <br/>
    <label for="checkbox">value {{ checked }}</label>
</div>
<script>
    new Vue({
        el:".exp",
        data:{
            checked:[]
        }
    })
</script>

單選按鈕

<div class="exp">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>
<script>
    new Vue({
        el:".exp",
        data:{
            picked:''
        }
    })
</script>

選擇列表

單選列表

<div class="exp">
    <select v-model="selected">
        <option disabled value="">請選擇</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
        el:".exp",
        data:{
            selected:''
        }
    })
</script>

若是 v-model 表達初始的值不匹配任何的選項，< select > 元素就會以」未選中」的狀態渲染。在 iOS 中，這會使用戶沒法選擇第一個選項，由於這樣的狀況下，iOS 不會引起 change 事件。所以，像以上提供 disabled 選項是建議的作法。

多選列表，並綁定到數組內

<div class="exp">
    <select v-model="selected" multiple style="width:50px">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
        el:".exp",
        data:{
            selected:[]
        }
    })
</script>

動態選項，用v-for渲染

<div class="exp">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
        el:".exp",
        data:{
            selected:'A',
            options:[
                {text:'one',value:'A'},
                {text:'two',value:'B'},
                {text:'three',value:'C'}
            ]
        }
    })
</script>

綁定 value

對於單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 一般是靜態字符串（對於勾選框是邏輯值）：

<!-- 當選中時，`picked` 爲字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 爲 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當選中時，`selected` 爲字符串 "abc" -->
<select v-model="selected">
    <option value="abc">ABC</option>
</select>

可是有時咱們想綁定 value 到 Vue 實例的一個動態屬性上，這時能夠用 v-bind 實現，而且這個屬性的值能夠不是字符串。

複選框

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b

單選按鈕

<input type="radio" v-model="pick" v-bind:value="a">

// 當選中時
vm.pick === vm.a

選擇列表設置

<select v-model="selected">
    <!-- 內聯對象字面量 -->
    <option v-bind:value="{ number: 123 }">123</option>
</select>

// 當選中時
typeof vm.selected // => 'object'
vm.selected.number // => 123

修飾符

.lazy

在默認狀況下， v-model 在 input 事件中同步輸入框的值與數據 (除了 上述 IME 部分)，但你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg">

.number

若是想自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">

這一般頗有用，由於在 type="number" 時 HTML 中輸入的值也老是會返回字符串類型。

.trim

若是要自動過濾用戶輸入的首尾空格，能夠添加 trim 修飾符到 v-model 上過濾輸入：

<input v-model.trim="msg">

To be continue......

上一篇：Vue的事件處理方法：https://segmentfault.com/a/11...
下一篇：Vue的組件：https://segmentfault.com/a/11...