Vue——radio、checkbox、select 标签的双向绑定

  • radio

    单选框的双向绑定,每个选项都需要设置 value 值和 v-model ,双向绑定就是绑定的这两个值

    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    // v-model 必须绑定同一个属性,可以不用设置 name 属性(因为v-model已经确定了单选框的分组)
    
    let vue = new Vue({
        el: '#app',
        data: {
            sex:'男'		//默认值可以通过 v-model 设置初始值实现
        },
    }
    

    :input 一般都需要绑定 label ,因为绑定了点击文字也能选中,优化了用户体验

  • checkbox

    • 单个框(一帮用于用户协议)

      用 v-model 绑定 boolear 值来切换选中状态

      <label for="agree">
          <input type="checkbox" id="agree" v-model="isAgree">同意
      </label>
      <h3>{{isAgree}}</h3>
      
      let vue = new Vue({
          el: '#app',
          data: {
              sex:'男',     //设置初始值实现默认选中
              isAgree: false
          }
      })
      
    • 多个框

      每个选项 v-model 绑定相同的数组,数组内存储的是选中的 value

      <label for="apple">
          <input type="checkbox" id="apple" value="apple" v-model="fruits">苹果
      </label>
      <label for="banana">
          <input type="checkbox" id="banana" value="banana" v-model="fruits">香蕉
      </label>
      <label for="orange">
          <input type="checkbox" id="orange" value="orange" v-model="fruits">苹果
      </label>
      <h3>{{fruits}}</h3>
      
      let vue = new Vue({
          el: '#app',
          data: {
              sex:'男',     //设置初始值实现默认选中
              isAgree: false,
              fruits: ['apple']
          },
          methods: {
      
          }
      })
      
  • select

    v-model 写在 select 标签上

    • 单选

      v-mode 绑定字符串

      <select  v-model="city">
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
      </select>
      <h3>{{city}}</h3>
      let vue = new Vue({
          el: '#app',
          data: {
              sex:'男',     //设置初始值实现默认选中
              isAgree: false,
              fruits: ['apple'],
              city:'北京',
          },
          methods: {
      
          }
      })
      
    • 多选

      v-model 绑定数组,select 设置属性 multiple,按住 ctrl 选中多个

      <select v-model="citys" multiple>
          <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      </select>
      <h3>{{citys}}</h3>
      
      let vue = new Vue({
          el: '#app',
          data: {
              sex:'男',     //设置初始值实现默认选中
              isAgree: false,
              fruits: ['apple'],
              city:'北京',
              citys: []
          },
          methods: {
      
          }
      })
      
上一篇:vue 中checkbox 配合v-model使用


下一篇:ElementUI三级菜单checkBox全选实现