zoukankan      html  css  js  c++  java
  • 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: {
        
            }
        })
        
  • 相关阅读:
    Change OL3 drawing cursor (blue circle)
    解决Bootstrap's dropdowns require Popper.js
    bootstrap-table 如何获得服务器返回的json数据中的二级数组
    The database returned no natively generated identity value
    控制台报错:java.lang.ClassNotFoundException: javax.xml.bind.JAXBException之解决方法
    Tomcat起不来解决方法(the selection cannot be run any server & unable to start within 45 seconds)
    mysql语句优化
    mysql_知识点整理
    web.xml文件的作用及基本配置(转)
    资深高手谈接外包项目
  • 原文地址:https://www.cnblogs.com/angle-yan/p/13456356.html
Copyright © 2011-2022 走看看