VUE基础知识5：checkbox

一、安装所用的包

npm install vue axios bootstrap

二、checkbox

如果是复选框，只有一个复选框的时候，会把此值转化为boolean类型，如果true则代表选中。

<input type="checkbox" v-model="a"> {
  {a}}

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            a: false
        }
    })
</script>

如果是多个checkbox,要增加value属性并且数据类型是数组。

爱好：
<input type="checkbox" v-model="b" value="篮球">篮球
<input type="checkbox" v-model="b" value="足球">足球
<input type="checkbox" v-model="b" value="网球">网球
{
  {}}


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            b: []
        }
    })
</script>

三、select

1、原生的获取select的值

<select name="" id="select">
    <option value="1">网球</option>
    <option value="2">足球</option>
    <option value="3">篮球</option>
</select>

<script>
    let oSelect = document.getElementById('select');
    oSelect.onchange = function () {
        alert(thia.value);
    };
</script>

2、vue中获取select的值。

<div id="app">
<select v-model="a">
    <option value="" disabled>请选择</option>
    <option value="1">网球</option>
    <option value="2">足球</option>
    <option value="3"