• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3表單輸入綁定

        發布時間:2023-02-20 21:39:08???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.輸入綁定
        本節課我們來開始學習 Vue3.x 的表單輸入綁定的使用方法。
        一.輸入綁定
        1. 使用 v-model 指令可以實現 input、textarea select 的雙向綁定;
        2. 它本質上是一個語法糖,負責監聽用戶輸入數據并進行數據的更新操作;
        3. 我們使用 input 來測試 v-model 的使用方法,并實現時時更新數據;
        <input type="text" placeholder="請輸入內容" v-model="message">
        <div>{{message}}div>
        data() {
        return {
        message : 'Hello, Vue3.x~'
        }
        },
        PS:當我們在 input 文本框編輯的時候,div 中的內容會時時更新;
        PSv-model input textarea 處理時,會拋出 input 事件來時時更新;
        4. 單個復選框,可以直接綁定布爾值 true false,自動識別是否勾選;
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}label>
        return {
        checked : true,
        }
        PSv-model checkbox radio 處理時,會拋出 change 事件來時時更新;
        5. 多個復選框,可以通過綁定實現選擇獲取信息;
        <input type="checkbox" id="a" value="Mr.Lee" v-model="checkedNames">
        <label for="a">Mr.Leelabel>
        <input type="checkbox" id="b" value="Mr.Wang" v-model="checkedNames">
        <label for="b">Mr.Wanglabel>
        <input type="checkbox" id="c" value="Mr.Zhang" v-model="checkedNames">
        <label for="c">Mr.Zhanglabel>
        <div>{{checkedNames}}div>
        return {
        checkedNames : [],
        }
        6. 單選按鈕,綁定后和復選框實現一樣的效果;
        <input type="radio" id="one" value="" v-model="gender">
        <label for="one">label>
        <input type="radio" id="two" value="" v-model="gender">
        <label for="two">label>
        return {
        gender : ''
        }
        7. 下拉選擇框,分單選和多選,基本同上;
        <select v-model="selected">
        <option>北京option>
        <option>上海option>
        <option>廣州option>
        <option>深圳option>
        select>
        <div>{{selected}}div>
        return {
        select : ''
        }
        PSv-model select 處理時,會拋出 change 事件來時時更新;
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区