2. 程式人生 > >Vue.js筆記-表單控制元件繫結

Vue.js筆記-表單控制元件繫結

阿新 • • 發佈：2019-01-09

基礎語法

        可以用v-model指令在表單控制元件元素上建立雙向資料繫結，根據控制元件型別它自動選取正確的方法更新元素。
text
  1. <span>Message is:{{ message }}</span>
  2. <input type="text" v-model="message" placeholder="edit me">
Multiline text
  1. <p>{{ message }}</p>
  2. <textarea v-model="message" placeholder="add multiple lines"
    ></textarea>
checkbox
       單個勾選框，邏輯值：
  1. <input type="checkbox" id="checkbox" v-model="checked">
  2. <label for="checkbox">{{ checked }}</label>//顯示勾選狀態，false或true
        多個勾選框，繫結到同一個陣列：
  1. <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  2. <label
    for="jack">Jack</label>
  3. <input type="checkbox" id="john" value="John" v-model="checkedNames">
  4. <label for="john">John</label>
  5. <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  6. <label for="mike">Mike</label>
  7. <br>
  8. <span>Checked names:{{
    checkedNames | json }}</span>
  9. newVue({
  10.   el:'...',
  11.   data:{
  12.     checkedNames:[]
  13. }
  14. })
radio
  1. <input type="radio" id="one" value="One" v-model="picked">
  2. <label for="one">One</label>
  3. <input type="radio" id="two" value="Two" v-model="picked">
  4. <label for="two">Two</label>
  5. <span>Picked:{{ picked }}</span>
  6. var vm = new Vue({
  7.    el : "#app",
  8.    data:{
  9.   picked:''
  10. }
  11. })
select
       單選：
  1. <select v-model="selected">
  2. <option selected>A</option>
  3. <option>B</option>
  4. <option>C</option>
  5. </select>
  6. <span>Selected:{{ selected }}</span>
       多選（繫結到一個數組）：
  1. <select v-model="selected" multiple>
  2. <option selected>A</option>
  3. <option>B</option>
  4. <option>C</option>
  5. </select>
  6. <br>
  7. <span>Selected:{{ selected | json }}</span>
       動態選項（用v-for渲染）：
  1. <select v-model="selected">
  2. <option v-for="option in options" v-bind:value="option.value">
  3. {{ option.text }}
  4. </option>
  5. </select>
  6. <span>Selected:{{ selected }}</span>
  7. newVue({
  8.   el:'...',
  9.   data:{
  10.     selected:'A',
  11.     options:[
  12. { text:'One', value:'A'},
  13. { text:'Two', value:'B'},
  14. { text:'Three', value:'C'}
  15. ]
  16. }
  17. })

繫結value

       對於單選按鈕，勾選框及選擇框選項，v-model 繫結的 value 通常是靜態字串（對於勾選框是邏輯值）：    
  1. <!--當選中時，`picked`為字串"a"-->
  2. <input type="radio" v-model="picked" value="a">
  3. <!--`toggle`為true或false-->
  4. <input type="checkbox" v-model="toggle">
  5. <!--當選中時，`selected`為字串"abc"-->
  6. <select v-model="selected">
  7. <option value="abc">ABC</option>
  8. </select>
       但是有時我們想繫結 value 到 Vue 例項的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字串。
checkbox
  1. <input
  2.   type="checkbox"
  3.   v-model="toggle"
  4.   v-bind:true-value="a"
  5.   v-bind:false-value="b">
  6. // 當選中時
  7. vm.toggle === vm.a
  8. // 當沒有選中時
  9. vm.toggle === vm.b
radio
  1. <input type="radio" v-model="pick" v-bind:value="a">
  2. // 當選中時
  3. vm.pick === vm.a
select options
  1. <select v-model="selected">
  2. <!--物件字面量-->
  3. <option v-bind:value="{ number: 123 }">123</option>
  4. </select>
  5. // 當選中時
  6. typeof vm.selected // -> 'object'
  7. vm.selected.number // -> 123

引數特性

lazy
       在預設情況下，v-model 在input 事件中同步輸入框值與資料，可以新增一個特性 lazy，從而改到在 change 事件中同步：
  1. <!--在"change"而不是"input"事件中更新-->
  2. <input v-model="msg" lazy>
number
       如果想自動將使用者的輸入轉為 Number 型別（如果原值的轉換結果為 NaN 則返回原值），可以新增一個特性 number：
  1. <input v-model="age" number>
debounce
       debounce 設定一個最小的延時，在每次敲擊之後延時同步輸入框的值與資料。如果每次更新都要進行高耗操作（例如在輸入提示中 Ajax 請求），它較為有用。
  1. <input v-model="msg" debounce="500">
       注意 debounce 引數不會延遲 input 事件：它延遲“寫入”底層資料。因此在使用 debounce 時應當用 vm.$watch() 響應資料的變化。若想延遲 DOM 事件，應當使用 debounce 過濾器。

案例

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>PlayAround2 Have Fun</title>
  6. <scriptsrc="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
  7. </head>
  8. <body>

  9. 相關推薦

    Vue.js筆記-表單控制元件繫結

    基礎語法         可以用v-model指令在表單控制元件元素上建立雙向資料繫結，根據控制元件型別它自動選取正確的方法更新元素。 text <span>Message is

    Vue之表單控制元件繫結

    1.text <p>text輸入文字</p> <span>Hello {{name}}</span> <input type="text" v-model="name" placeholder="yous name" name

    Vue 的（v-model）表單控制元件繫結

    v-model 為表單控制元件元素建立資料雙向繫結。（將js變數的值 快速 設定到控制元件上，然後將使用者輸入內容 快速 設定回js變數）   <!DOCTYPE html> <html lang="en"> <head> <m

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

    #### vue基礎 ##### 宣告式渲染 `Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統` `Example1` ```vue Examples {{ 10+203 }} {{ myname }

    vuejs表單控制元件繫結

    一、基礎語法 vuejs中用v-model指令在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。但要注意的是v-model僅僅是語法糖，它只負責監聽使用者的輸入時間一更新資料，並特別處理一些極端的例子。 注：1.·v

    基於Ant Design Vue封裝一個表單控制元件

    # 開原始碼 [https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant) > 有缺點本來是寫在最後的，但是博文寫的似乎有點太長了，估計大家沒時間往下看，於是就把有缺點寫在前面了，不喜歡可以先

    vue.js v-model雙向資料繫結， vue.js form表單資料繫結

    vue.js v-model雙向資料繫結， vue.js form表單資料繫結   ================================ ©Copyright 蕃薯耀 2018年11月29日 http://fanshuyao.iteye.com/   &l

    Vue 表單控制元件

    js檔案 var vm = new Vue({ el: '#app', data: { msg : '', age : u

    js 動態新增多表單控制元件 div

    <script type="text/javascript">  var p=1; function CreateUpload()     {         p++;         var div=document.createElement('div');         var html

    Vue 元件實現表單的雙向繫結

    下面是一個簡單的貨幣輸入的自定義控制元件，來自https://cn.vuejs.org/v2/guide/components.html： <body> <div id="curr

    文件驅動 —— 表單元件（五）：基於Ant Design Vue 的表單控制元件的demo，再也不需要寫程式碼了。

    # 原始碼 [https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant) # 特點 * 只需要更改meta，既可以切換表單 * 可以統一修改樣式，統一升級，以最小的代價，應對UI的升級、切換

    Vue3元件（九）Vue + element-Plus + json = 動態渲染的表單控制元件

    # 一個成熟的表單 表單表單，你已經長大了，你要學會： * 動態渲染 * 支援單列、雙列、多列 * 支援調整佈局 * 支援表單驗證 * 支援調整排列（顯示）順序 * 依據元件值顯示需要的元件 * 支援 item 擴充套件元件 * 可以自動建立 model > 這個表單控制元件是基於 **element-pl

    C# 新增Excel表單控制元件（Form Controls）

    在Excel中，新增的控制元件可以和單元格關聯，我們可以操作控制元件來修改單元格的內容，在下面的文章中，將介紹在Excel中新增幾種不同的表單控制元件的方法，包括：  新增文字框（Textbox）  單選按鈕（Radio button）  複選框（Checkbox

    第三章 表單 3-4 表單控制元件

    1、輸入框inputbootstrap通過對input標籤的type屬性進行識別，得到相應的格式，所以input標籤一定要對type進行指定。另外，還需通過form-control對輸入框進行規範統一，此外，可以用placeholder對框內內容進行初始化。 <form role="form"&

    form表單控制元件向後臺傳遞陣列

    後臺: public class MSelectDetail { private Integer xxx; private String xxxx; private Str

    細說 Angular 的自定義表單控制元件 （贊，實用)

    我們在構建企業級應用時，通常會遇到各種各樣的定製化功能，因為每個企業都有自己獨特的流程、思維方式和行為習慣。有很多時候，軟體企業是不太理解這種情況，習慣性的會給出一個診斷，『你這麼做不對，按邏輯應該這樣這樣』。但企業往往不會接受這種說法，習慣的力量是強大的，我們一定要尊重

    vue動態禁用控制元件繫結disable

    場景 報修範圍取值不同時 ，區域有時需要禁用 程式碼 <el-form-item label="報修範圍" prop="applicationRange" > <el-select v-model="addInfo.applicationRange" placeho

    vue.js form表單提交

    form表單提交是前端經常要用到的，vue.js的form提交只是比普通的多加幾個東西 其他都是大同小異的 上程式碼吧！ 主要就是v-model的用法啦  <form action="" method="post" enctype="multipart/form-data"> &

    HTML5（一）語義化標籤、新增表單控制元件

    1、新的頁面結構以及寬鬆的語法規範         <!doctype html>         <meta charset="utf-8"/> 2、語義化標籤 （1）<header></header>    頁首：主要用於頁

    HTML常用行標籤和表單控制元件

    HTML常用的行級標籤 行內元素不獨佔一行 HTML連結 a標籤 href屬性是必須要的屬性，target指定連線以何種方式開啟，_blank用新視窗開啟，預設是self原視窗開啟。 <a href="連結" target="_blank">連結文字</a&