Vue表單與v--model使用詳解

1、基本用法

VUE提供了v--model指令， 用于在表單類元素上雙向綁定事件

（1）、input和textarea場(chǎng)景使用

 <div id="app">
    <input type="text" v-model='inputModel'>
    <br>{{inputModel}}
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model='textareaModel'>我是一名學(xué)生</textarea>
    <br>{{textareaModel}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            inputModel: '',
            textareaModel: '',
        },
    })
</script>
image.png

注意： 所顯示的值只依賴于所綁定的數(shù)據(jù)，不再關(guān)心初始化時(shí)的插入的value

（2）、單選按鈕（radio）

 <div id="app">
    單個(gè)單選框：<input type="radio" name="" v-bind:checked="oneradio">
    <br>
    多個(gè)單選框：
    <br>
    貓蛋：<input type="radio" name="checks" value='貓蛋' v-model="checkRadio">
    <br>
    狗蛋：<input type="radio" name="checks" value='狗蛋' v-model="checkRadio">
    <br>
    翠花：<input type="radio" name="checks" value='翠花' v-model="checkRadio">
    ------現(xiàn)在選中的是:{{checkRadio}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            oneradio: true,
            checkRadio: ''
        },
    })
</script>
image.png
  1. 單個(gè)單選按鈕，直接用v--bind綁定一個(gè)布爾值，用v--model是不可以的，
  2. 如果是組合使用，就需要v--model來(lái)配合value使用，綁定選中的單選框的value值，此處所綁定的初始值可以隨意給。

（3）、復(fù)選框（checkbox）

 <div id="app">
    單個(gè)復(fù)選框--用v-model：<input type="checkbox" name="" v-model='checkboxModel'>
    單個(gè)復(fù)選框--用v-bind：<input type="checkbox" name="" v-bind：checked=checkboxModel>
    <br>
    多個(gè)復(fù)選框：
    <br>
    貓蛋：<input type="checkbox" value='貓蛋' v-model="checkboxRadio">
    <br>
    狗蛋：<input type="checkbox" value='狗蛋' v-model="checkboxRadio">
    <br>
    翠花：<input type="checkbox" value='翠花' v-model="checkboxRadio">
    ------現(xiàn)在選中的是:{{checkboxRadio}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            checkboxModel: '',
            checkboxRadio: [],
        },
    })
</script>
image.png

1、單個(gè)復(fù)選框，直接用定一個(gè)布爾值，可以用v--model可以用v--bind
2、多個(gè)復(fù)選框– 如果是組合使用，就需要v--model來(lái)配合value使用，v-model綁定一個(gè)數(shù)組—如果綁定的是字符串，則會(huì)轉(zhuǎn)化為true、false，與所有綁定的復(fù)選框的checked屬性相對(duì)應(yīng)。

（4）下拉框（select）

<div id="app">
    單選下拉框：
    <select name="" v-model='selected'>
        <option value="貓蛋">貓蛋</option>
        <option value="狗蛋">狗蛋</option>
        <option value="翠花">翠花</option>
    </select>---現(xiàn)在選中的是：{{selected}}
    <br>
    <br>
    多選下拉框：
    <select name="" v-model='selectedMul' multiple>
        <option value="貓蛋">貓蛋</option>
        <option value="狗蛋">狗蛋</option>
        <option value="翠花" selected>翠花</option>
    </select>---現(xiàn)在選中的是：{{selectedMul}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: '',
            selectedMul: [],
        },
    })
</script>
image.png
  1. 如果是單選，所綁定的value值初始化可以為數(shù)組，也可以為字符串，有value直接優(yōu)先匹配一個(gè)value值，沒有value就匹配一個(gè)text值
  2. 如果是多選，就需要v--model來(lái)配合value使用，v--model綁定一個(gè)數(shù)組，與復(fù)選框類似
  3. v--model一定是綁定在select標(biāo)簽上
2、結(jié)合綁定值的使用

（1）、單選按鈕

<div id="app">
    單選框：<input type="radio" name="" v-model='radioValue' v-bind:value='value'>---{{radioValue}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            radioValue: '',
            value: '11',
        },
    })
</script>
image.png

只需要用v--bind給單個(gè)單選框綁定一個(gè)value值，此時(shí)，v--model綁定的就是他的value值

（2）、復(fù)選框

<div id="app">
    復(fù)選框：選中和不選中的value值不一樣
    <input type="checkbox" name="" v-model='checkboxValue' :true-value='value1' :false-value='value2'>
    <br>
    {{checkboxValue}}
    <br>
    我被選中了：{{checkboxValue==value1}}
    <br>
    我沒有被選中：{{checkboxValue==value2}}
    <br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            value1: '我被選中了',
            value2: '我沒有被選中',
            checkboxValue: '',
        },
    })
</script>
image.png

（3）、下拉框

 <div id="app">
    下拉框：
    <select name="" v-model='selectedValue'>
        <option value="貓蛋" :value="{num:111}">貓蛋</option>
        <option value="狗蛋">狗蛋</option>
        <option value="翠花" selected>翠花</option>
    </select>---現(xiàn)在選中的是：{{selectedValue.num}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selectedValue: '',
        },
    })
</script>
image.png

在select標(biāo)簽上綁定value值對(duì)option并沒有影響,但是在option上綁定是可以的

3、結(jié)合修飾符的使用

（1）、lazy---v--model默認(rèn)是在input輸入時(shí)實(shí)時(shí)同步輸入框的數(shù)據(jù)，而lazy修飾符，可以使其在失去焦點(diǎn)或者敲回車鍵之后在更新。

<div id="app">
    <input type="text" v-model='inputStr'>---{{inputStr}}
    <br>
    <input type="text" v-model.lazy='inputStr2'>---{{inputStr2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            inputStr: '',
            inputStr2: '',
        },
    })
</script>
image.png

（2）、number--將輸入 的字符串轉(zhuǎn)化為number類型

<div id="app">
    number類型:<input type="text" v-model.number='isNum'>---{{typeof isNum}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isNum: '',
        },
    })
</script>
image.png

（3）、trim--自動(dòng)過濾輸入過程中收尾輸入的空格

 <div id="app">
    trim:<input type="text" v-model.trim='toggle'>---{{toggle.split('').length}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            toggle: ''
        },
    })
</script>
image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容