Vue之表單事件資料繫結詳解

阿新 • • 發佈：2021-11-22

在這裡插入圖片描述

<body>
    <div id="root">
        <form action="" @submit.prevent="demo">
            <label for="TW"> 姓名：</label>
            <input type="text" id="TW" v-model.trim="userInfo.account"><br><br> 密碼：
            <input type="passwww.cppcns.comword" id="pa" v-model="userInfo.password"><br><br> 年齡：
            <input type="number" v-model.number="userInfo.age"> <br><br> 性別： <input type="radio" name="sex" value="male" v-model="userInfo.sex">男
  www.cppcns.com 
          <input type="radio" name="sex" v-model="userInfo.sex" value="female">女<br><br> 愛好： 所屬校區:
            <select v-model="userInfo.city">
                <option value="school">請選擇校區</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
               <option value="shenzhen">深圳</option>
            </select>
            <br><br>
            <input type="checkbox" v-model="userInfo.hobby" value="study"> 學習
            <input type="checkbox" v-model="userInfo.hobby" value="sing"> 唱歌
            <input type="checkbox" v-model="userInfo.hobby" value="dance"> 跳舞
            <input type="checkbox" v-model="userInfo.hobby" value="game"> 王者<br><br> 其他資訊：
            <textarea name="" v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree"> 閱讀並接受
            <a href="#">《使用者協議》</a><button>提交</button>
        </form>
    </div>
    <script>
        .config.productionTip = false;
        new Vue({
            el: '#root',data: {
                userInfo: {
                    account: '',password: '',age: '',sex: 'female',city: 'beijing',hobby: [],other: '',agree: '',}
 www.cppcns.com 
           },methods: {
                demo() {
                    console.log(ON.stringify(this.userInfo));
                }
            }
        })
    </script>
</body>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!

Vue之表單事件資料繫結詳解

02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控制元件繫結

vue基礎宣告式渲染 Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統

Vue表單控制元件繫結

基礎用法　　可以用 v-model 指令在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。v-model本質上不過是語法糖，它負責監聽使用者的輸入事件以更新資料

Vue專案表單項很多沒有繫結prop 表單重置

element-UI的表單元件在使用時需要繫結prop屬性才能使用自帶的resetField重置表單，如果遇到表單項很多，而且大部分不需要校驗，為了重置去一個一個設定prop的話很麻煩。

3、Vue表單的雙向繫結以及Vue元件

Vue表單雙向繫結什麼是雙向資料繫結　　Vue.js 是一個 MVVM 框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。這也算是 Vue.js 的精髓之處了。

02、JS高階函式、v-model表單的雙向繫結

目錄JavaScript高階函式的使用JS中的for迴圈JS中與陣列有關的高階函式v-model表單輸入繫結v-model的基本使用v-model的原理v-model和radio的結合---單選框v-model和checkbox的結合---多選框v-model結合select標籤修飾

ccfrom表單設計器之表單事件,表單主表事件,從表事件.

>>> 關鍵字:ccflow 流程設計器，流程管理系統，流程表單事件 10表單事件

vue實現簡易的雙向資料繫結

主要是通過資料劫持和釋出訂閱一起實現的雙向資料繫結資料更新時,可以更新檢視檢視的資料更新是,可以反向更新模型

Ant Design Vue 通過v-decorator實現資料繫結

<a-form-item label=\"切換環境\"> <a-select v-decorator=\"[ \'env\', { rules: [{ required: true, message: \'該欄位是必填欄位\' }] }

Vue3學習（六）之使用Vue3進行資料繫結及顯示列表資料

一、寫在前面說來還是比較慚愧的，從週二開始事就比較多，週三還電腦壞了，然後修電腦等等一些雜事，忙的團團轉，因為週二、週三自己走的過多了，導致不敢直腰，週四臥床一天。

AtguiguVue【P1-P10】初識vue、模板語法、資料繫結、el和data的兩種寫法、vue中的MVVM模型

尚矽谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通_嗶哩嗶哩_bilibili 1、初識vue <!DOCTYPE html>

1、Vue的模板語法、資料繫結

1、Vue模板語法有2大類： 1.1.插值語法：功能：用於解析標籤體內容。寫法：{{xxx}}，xxx是js表示式，且可以直接讀取到data中的所有屬性。

Vue雙向繫結詳解

目錄1、雙向繫結2、那麼其它標籤選中會不會也有這個結果，答案當然是有：3、我們再來看一個：4、注意總結1、雙向繫結

React事件繫結詳解

目錄類元件事件繫結函式元件事件繫結總結 React事件繫結和原生DOM事件繫結相似

Oracle如何更改表空間的資料檔案位置詳解

表空間概述 Oracle的表空間屬於Oracle中的儲存結構，是一種用於儲存資料庫物件(如：資料檔案)的邏輯空間，是Oracle中資訊儲存的最大邏輯單元，其下還包含有段、區、資料塊等邏輯資料型別。表空間是在資料庫中開闢的一

小程式表單認證佈局及驗證詳解

本文例項為大家分享了小程式表單認證佈局及驗證的具體程式碼，供大家參考，具體內容如下

Vue中新增滾動事件設定的方法詳解

一、問題發現在看Vue的事件文件中,測試scroll事件發現如下是行不通的,觸發不了scroll事件,經過一番搜尋未找到原因,不過找到了另外兩種在Vue中設定滾動事件。

Vue之前端體系與前後端分離詳解

目錄概述前端知識體系前端三要素表現層（）行為層（）Script 框架UI框架JavaScript 構建工具三端統一混合開發（Hybrid App）微信小程式後端技術主流前端框架ElementUlICEVantUlAtUlCubeUl前端發展史基於AJAX帶來的SP

angular雙向繫結詳解

目錄雙向繫結原理ngModel效果圖自定義雙向繫結屬性元件-html元件-ts外部使用效果圖總結雙向繫結原理

Vue表單控制元件資料繫結方法詳解

基礎用法可以用 v-model 指令在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。v-model本質上不過是語法糖，它負責監聽使用者的輸入事件以更新資料

Vue之表單事件資料繫結詳解

總結

相關推薦