• vue中的表单


    v-model指令实现表单双向绑定数据。触发文本框的input事件。
    一、文本框

    <div id="J_app">
      <p>{{ info }}</p>
      <input v-model.trim="info">
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: 'Hello Vue!'
      }
    })

    二、单选框

    <div id="J_app">
      <input type="radio" id="male" value="male" v-model="ro">
      <label for="male">male</label>
      <br>
      <input type="radio" id="female" value="female" v-model="ro">
      <label for="female">female</label>
      <br>
      <span>性别:{{ ro }}</span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        ro: ''
      }
    })

    三、复选框
    1、一个勾选框

    <div id="J_app">
      <input type="checkbox" id="J_ckb" v-model="ckb">
      <label for="checkbox">{{ ckb }}</label>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        ckb: ''
      }
    })

    2、多个勾选框

    <div id="J_app">
      <input type="checkbox" id="html" value="html" v-model="ckbs">
      <label for="html">html</label>
      <input type="checkbox" id="css" value="css" v-model="ckbs">
      <label for="css">css</label>
      <input type="checkbox" id="js" value="js" v-model="ckbs">
      <label for="js">js</label>
      <br>
      <span>你学过哪些:{{ ckbs }}</span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        ckbs: []
      }
    })

    3、多个动态勾选框
    如果是动态复选框,怎么写?如果要实现全选,反选,怎么写?看这里

    四、选择列表
    1、单选

    <div id="J_app">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>vuejs</option>
        <option>reactjs</option>
        <option>angularjs</option>
      </select>
      <span>我选择: {{ selected }}</span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        selected: ''
      }
    })

    2、多选

    <div id="J_app">
      <select v-model="selected" multiple style=" 50px;">
        <option disabled value="">请选择</option>
        <option>vuejs</option>
        <option>reactjs</option>
        <option>angularjs</option>
      </select>
      <span>我选择: {{ selected }}</span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        selected: []
      }
    })

    3、动态选

    <div id="J_app">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>我选择: {{ selected }}</span>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        selected: '0',
        options: [
          { text: 'vuejs', value: '0' },
          { text: 'reactjs', value: '1' },
          { text: 'angularjs', value: '2' }
        ]
      }
    })
  • 相关阅读:
    常见HTTP状态(304,)
    面试错题集
    从零构建以太坊(Ethereum)智能合约到项目实战——学习笔记1
    windows 以太坊开发框架Truffle环境搭建
    Ollydbg使用问题汇总
    网络攻防实战技术之——缓冲区溢出篇
    如何批量删除.svn文件
    树莓派安装nextcloud、Seafile
    汇编语言从入门到精通-5微机CPU的指令系统2
    kali安装vm tools正确操作
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_form.html
Copyright © 2020-2023  润新知