Vue.js學習筆記 第七篇 表單控件綁定

本篇主要說明表單控件的數據綁定，這次沒有新的知識點

文本框

1、普通文本框

<div id="app-1">
    <p><input v-model="textBox" placeholder="輸入內容...">輸入的內容：{{ textBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            textBox: ''
        }
    })
</script>

2、數字文本框

<div id="app-1">
    <p><input v-model.number="numberTextBox" type="number" placeholder="輸入內容..."> 輸入的內容：{{ numberTextBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            numberTextBox: ''
        }
    })
</script>

.number參數會強制把返回值轉成Number類型，因為就算是type="number"，返回的也是字符串型

3、多行輸入框

<div id="app-1">
    <p><textarea v-model="multiTextBox" placeholder="輸入內容..."></textarea></p>
    <p>輸入的內容：</p>
    <p style="white-space:pre">{{ multiTextBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            multiTextBox: ''
        }
    })
</script>

style="white-space:pre"表示空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽

復選框

1、單個復選框

<div id="app-1">
    <input type="checkbox" id="checkbox" v-model="singleCheckBox">
    <label for="checkbox">{{ singleCheckBox }}</label>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            singleCheckBox: false
        }
    })
</script>
</body>

2、定義屬性單個復選框

<div id="app-1">
    <input type="checkbox" id="checkbox" v-model="customSingleCheckBox" v-bind:true-value="customTrue" v-bind:false-value="customFalse">
    <label for="checkbox">{{ customSingleCheckBox }}</label>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            customTrue: '真',
            customFalse: '假',
            customSingleCheckBox: '假'
        }
    })
</script>

v-bind:true-value設置為真時的屬性，v-bind:false-value設置為假時的屬性

3、多個復選框

<div id="app-1">
    <input type="checkbox" id="tansea" value="TanSea" v-model="multiCheckBox">
    <label for="tansea">TanSea</label>
    <input type="checkbox" id="google" value="Google" v-model="multiCheckBox">
    <label for="google">Google</label>
    <input type="checkbox" id="baidu" value="Baidu" v-model="multiCheckBox">
    <label for="baidu">Baidu</label>
    <p>選擇的項：{{ multiCheckBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            multiCheckBox: []
        }
    })
</script>

單選框

<div id="app-1">
    <input type="radio" id="male" value="男" v-model="radioBox">
    <label for="male">男</label>
    <input type="radio" id="female" value="女" v-model="radioBox">
    <label for="female">女</label>
    <p>選擇的項：{{ radioBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            radioBox: ''
        }
    })
</script>

下拉框

1、普通下拉框

<div id="app-1">
    <select v-model="comboBox">
        <option disabled value="">請選擇一項</option>
        <option>男</option>
        <option>女</option>
    </select>
    <p>選擇的項：{{ comboBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            comboBox: ''
        }
    })
</script>

2、動態綁定下拉框

<div id="app-1">
    <select v-model="dynamicComboBox">
        <option v-for="optionItem in optionItems" v-bind:value="optionItem.value">
            {{ optionItem.text }}
        </option>
    </select>
    <p>選擇的項：{{ dynamicComboBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            dynamicComboBox: '',
                optionItems: [
                    { value: 'TanSea', text: '雙子宮殿' },
                    { value: 'Google', text: '谷歌搜索' },
                    { value: 'Baidu', text: '百度搜索' }
                ]
        }
    })
</script>

3、多選列表

<div id="app-1">
    <p><select v-model="multiComboBox" multiple>
        <option>雙子宮殿</option>
        <option>谷歌搜索</option>
        <option>百度搜索</option>
    </select></p>
    <p>選擇的項：{{ multiComboBox }}</p>
</div>
<script type="text/javascript">
    var vm1 = new Vue({
        el: '#app-1',
        data: {
            multiComboBox: []
        }
    })
</script>