zoukankan      html  css  js  c++  java
  • 双向绑定表单数据

    一. 复选框

    checkedNames为选中的复选框的value的值,数组值按照复选框选中顺序排列

    // 多个复选框绑定到数组
    <div id='example-3'>
      <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>
    
    
    new Vue({
      el: '#example-3',
      data: {
        checkedNames: []
      }
    })

    二. 单选按钮

    picked输出值为选中的单选按钮的value的值

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

    三. 选择框

    1. 单选时

    selected为选中的选项值

    注意:如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态

    <div id="example-5">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    
    new Vue({
      el: '...',
      data: {
        selected: ''
      }
    })

    2. 多选时

    selected的值为选中选项,数组中的排序按照选项排序,不同于复选框按照先后

    <div id="example-6">
      <select v-model="selected" multiple style=" 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br>
      <span>Selected: {{ selected }}</span>
    </div>
    
    new Vue({
      el: '#example-6',
      data: {
        selected: []
      }
    })

    3. 使用v-for渲染单选

    选项显示的是text,而我们selected获得的是value的值。例:

    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
    
    
    new Vue({
      el: '...',
      data: {
        selected: 'A',
        options: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
      }
    })
    作者:dlm17
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    LeetCode 4. Median of Two Sorted Arrays
    LeetCode 67. Add Binary
    LeetCode 66. Plus One
    Linux驱动之平台设备驱动模型简析(驱动分离分层概念的建立)
    Linux驱动之一个简单的输入子系统程序编写
    Linux驱动之输入子系统简析
    Linux驱动之定时器在按键去抖中的应用
    Linux驱动之同步、互斥、阻塞的应用
    Linux驱动之异步OR同步,阻塞OR非阻塞概念介绍
    Linux驱动之异步通知的应用
  • 原文地址:https://www.cnblogs.com/dlm17/p/12745707.html
Copyright © 2011-2022 走看看