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

2020-08-08 09:02:49 阅读：280 来源： 互联网

标签：el checkbox 初始值绑定 Vue 选中 radio model

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: {

    }
})

标签：el,checkbox,初始值,绑定,Vue,选中,radio,model
来源： https://www.cnblogs.com/angle-yan/p/13456356.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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