vue.js實戰學習——表單與v-model（一）

注：此內容摘抄自：梁灝的《Vue.js實戰》

注：記得要引入vue.js才能運行哦，文章中貼出的代碼直接復制是不行的，html css js 都放在了一起，而且也沒有引用vue.js。

基本用法

1.表單控件在實際業務較為常見，比如單選、多選、下拉選擇、輸入框等，用他們可以完成數據的錄入、校驗、提交等。Vue.js提供了v-model指令，用於在表單類元素上的雙向綁定數據。

<div class="app1">
    <input type="text" v-model="message" placeholder="輸入..." />
    <p>輸入的內容是：{{message}}</p>
</div>

var app1=new Vue({
    el:'.app1',
    data:{
        message:''
    }
});

對於文本域textarea也是同樣的用法。

2.使用v-model時，如果是用中文輸入法輸入中文，一般在沒有選定詞組前，也就是在拼音階段，Vue是不會更新數據的，當敲下漢字時才會觸發更新。如果希望總是實時更新，可以用@input代替v-model。事實上，v-model也是一個特殊的語法糖，只不過它會在不同的表單上智能處理。

<div class="app2">
    <input type="text" @input="handleInput" placeholder="輸入..." />
    <p>輸入的內容是：{{message}}</p>
</div>

var app2=new Vue({
    el:'.app2',
    data:{
        message:''
    },
    methods:{
        handleInput:function(e){
            this.message=e.target.value;
        }
    }
});

3.單選按鈕

單選按鈕在單獨使用時，不需要v-model，直接使用v-bind綁定一個布爾類型的值，為真時選中，為假時不選。

<div class="app3">
    <input type="radio" name="" id="button1" value="" :checked="picked" />
    <label for="button1">單選按鈕</label>
</div>

var app3=new Vue({
    el:'.app3',
    data:{
        picked:true
    }
});

如果是組合使用來實現互斥選擇效果，就需要v-model配合value來使用：

<div class="app4">
    <input type="radio" name="" id="html" value="html" v-model="picked" />
    <label for="html">HTML</label>
    <br />
    <input type="radio" name="" id="js" value="js" v-model="picked" />
    <label for="js">JS</label>
    <br />
    <input type="radio" name="" id="css" value="css" v-model="picked" />
    <label for="css">CSS</label>
    <br />
    <p>選擇的項是：{{picked}}</p>
</div>

var app4=new Vue({
    el:'.app4',
    data:{
        picked:'js'
    }
});

4.復選框

復選框也分單獨使用和組合使用，不過用法稍與單選不同。復選框單獨使用時，也是用v-model來綁定一個布爾值。

<div class="app5">
    <input type="checkbox" name="checked" id="checked" value="" v-model="checked" />
    <label for="checked">選擇狀態：{{checked}}</label>
</div>

var app5=new Vue({
    el:'.app5',
    data:{
        checked:false
    }
});

組合使用時，也是v-model與value一起，多個勾選框都綁定到同一個數組類型的數據，value的值在數組當中，就會選中這一項。這個過程也是雙向的，在勾選時，value的值也會自動push到這個數組中：

<div class="app6">
    <input type="checkbox" name="" id="html" value="html" v-model="checked" />
    <label for="html">HTML</label>
    <br />
    <input type="checkbox" name="" id="js" value="js" v-model="checked" />
    <label for="js">JS</label>
    <br />
    <input type="checkbox" name="" id="css" value="css" v-model="checked" />
    <label for="css">CSS</label>
    <br />
    <p>選擇的項是：{{checked}}</p>
</div>

var app6=new Vue({
    el:'.app6',
    data:{
        checked:['html','css']
    }
});

5.選擇列表

選擇列表局勢下拉選擇器，也是常見的表單控件，同樣也分為單選和多選兩種方式。

<div class="app7">
    <select name="" v-model="selected">
        <option>html</option>
        <option value="js">JS</option>
        <option>CSS</option>
    </select>
    <p>選擇的項是：{{selected}}</p>
</div>

var app7=new Vue({
    el:'.app7',
    data:{
        selected:'html'
    }
});

<option>是備選項，如果含有value屬性，v-model就會優先匹配value的值；如果沒有，就會直接匹配<option>的text，比如選中第二項時，selected的值是js而不是JS。

給<selected>添加屬性multiple就可以多選了，此時v-model綁定的是一個數組，與復選框用法類似。（本人覺得太丑了，就不列舉了。而且好像只有一開始默認值是多選，然后自己再點擊就是單選了）

在業務中，<option>經常用v-for動態輸出，value和text也是用v-bind來動態輸出的。

<div class="app9">
    <select name="" v-model="selected">
        <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
    <p>選擇的項是：{{selected}}</p>
</div>

var app9=new Vue({
    el:'.app9',
    data:{
        selected:'html',
        options:[
            {
                text:'HTML',
                value:'html'
            },
            {
                text:'JavaScript',
                value:'js'
            },
            {
                text:'CSS',
                value:'css'
            }
        ]
    }
})

雖然用選擇列表<select>控件可以很簡單的完成下拉選擇的需求，但是在實際業務中反而不常用，因為它的樣式依賴平台和瀏覽器，無法統一，也不太美觀，功能也有限，比如不支持搜索，所以常見的解決方案是用div模擬一個類似的控件。