閱讀本文約需要5分鐘

大家好，我是你們的導師，經(jīng)常看我朋友圈的同學應該知道，我每天會在微信上給大家免費提供以下服務！

1、長期為你提供最優(yōu)質(zhì)的學習資源！

2、給你解決技術問題！

3、每天在朋友圈里分享優(yōu)質(zhì)的技術文章！

4、每周1、3、5送紙質(zhì)書籍免費送給大家，每年至少送書800本書！

5、為大家推薦靠譜的就業(yè)單位！

請注意！我上面說的5點全部都是免費的！全網(wǎng)你應該找不到第二家吧！

當然，大家在我私人微信上問我問題，僅限回答web前端、java相關的。

---------------------------

好了，接下來開始今天的技術分享！上次老師跟大家分享了Vue之響應接口的知識，今天跟大家分享下Vue之表單的知識。?

1 輸入框介紹 Vue.js 表單上的應用。你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。v-model 會根據(jù)控件類型自動選取正確的方法來更新元素。實例中演示了 input 和 textarea 元素中使用 v-model 實現(xiàn)雙向數(shù)據(jù)綁定：<div id="app"> <p>input 元素：p> <input v-model="message" placeholder="編輯我……"> <p>消息是: {{ message }}p> <p>textarea 元素：p> <p style="white-space: pre">{{ message2 }}p> <textarea v-model="message2" placeholder="多行文本輸入……">textarea>div><script>new Vue({ el: '#app', data: { message: 'Jinxun',????????message2:?'金迅教育\r\nhttp://www.jinxun.com' }})script>2?復選框復選框如果是一個為邏輯值，如果是多個則綁定到同一個數(shù)組：復選框以下實例中演示了復選框的雙向數(shù)據(jù)綁定：<div id="app"> <p>單個復選框：p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}label> <p>多個復選框：p>??<input?type="checkbox"?id="jinxun"?value="Runoob"?v-model="checkedNames"> <label for="jinxun">Jinxunlabel> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Googlelabel> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobaolabel> <br> <span>選擇的值為: {{ checkedNames }}span>div><script>new Vue({ el: '#app', data: { checked : false, checkedNames: [] }})script>3?單選按鈕以下實例中演示了單選按鈕的雙向數(shù)據(jù)綁定：單選按鈕<div id="app"> <input type="radio" id="jinxun" value="Jinxun" v-model="picked"> <label for="jinxun">Jinxunlabel> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Googlelabel> <br> <span>選中值為: {{ picked }}span>div><script>new Vue({ el: '#app', data: { picked : 'Jinxun' }})script>3?select 列表以下實例中演示了下拉列表的雙向數(shù)據(jù)綁定：<div id="app"> <select v-model="selected" name="fruit"> <option value="">選擇一個網(wǎng)站option>????<option?value="www.jinxun.com">Jinxunoption> <option value="www.google.com">Googleoption> select> <div id="output"> 選擇的網(wǎng)站是: {{selected}} div>div><script>new Vue({ el: '#app', data: { selected: '' }})script>4?修飾符.lazy在默認情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個修飾符 lazy ，從而轉變?yōu)樵?change 事件中同步：<input v-model.lazy="msg">.number如果想自動將用戶的輸入值轉為 Number 類型(如果原值的轉換結果為 NaN 則返回原值)，可以添加一個修飾符 number 給 v-model 來處理輸入值："age"type="number">這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。.trim如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：<input v-model.trim="msg">今天就分享這么多，關于Vue之表單，你學會了多少？歡迎在留言區(qū)評論，對于有價值的留言，我們都會一一回復的。如果覺得文章對你有一丟丟幫助，請點右下角【在看】，讓更多人看到該文章。

總結

以上是生活随笔為你收集整理的js控制复选框选中显示不同表单_Vue之 表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。