快捷導(dǎo)航

Vue.js表單控件綁定示例盤點

更新時間：2023年07月21日 10:25:00 作者：小白兔zqd

這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定

可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖，它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。

1、單行文本

<body>
    <div id="example">
        <input type="text" v-model="message">
        <p>Message is:{{message}}</p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            message:""
        }
    });
</script>

2、多行文本

<body>
    <div id="example">
        <span>Mulitline message is:</span>
        <p style="white-space:pre">{{message}}</p>
        <br>
        <textarea v-model="message" placeholder="add mulitine lines..."></textarea>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            message:""
        }
    });
</script>

3、復(fù)選框

<body>
    <div id="example">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            checked:false
        }
    });
</script>

4、復(fù)選框（升級版）

<body>
    <div id="example">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names:{{checkedNames}}</span>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            checkedNames:[]
        }
    });
</script>

5、單選按鈕

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

6、選擇列表

<body>
    <div id="example">
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Sclected:{{selected}}</span>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            selected:""
        }
    });
</script>

7、綁定value

復(fù)選框

<body>
    <div id="example">
        <input 
            type="checkbox"
            v-model="toggle"
            v-bind:true-value="a"
            v-bind:false-value="b">
        <p>{{toggle}}</p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            a:'a',
            b:'b' ,
            toggle:"b"   
        }
    });
</script>

單選按鈕

<body>
    <div id="example">
        <input 
            type="radio"
            v-model="picked"
            v-bind:value="a">
        <p>{{picked}}</p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            a:'a',
            picked:""   
        }
    });
</script>

以上就是Vue.js表單控件綁定示例盤點的詳細內(nèi)容，更多關(guān)于Vue表單控件綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: