Vue编程学习之复选框checkbox

15195775117

基础版


效果图：



组件代码：


是否选定是按逻辑值true,false来算的


<template>
    <div id="app">
        <input type="checkbox" v-model="value1" />
        <input type="checkbox" v-model="value2" />
        <input type="checkbox" v-model="value3" />
        <p>选择结果:{{value1}},{{value2}},{{value3}}</p>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                value1:'true',
                value2:'',
                value3:'true'
            }
        }
    }
</script>


我的思考：
这个基础版复选框跟基础版单选框一样，没有绑定文字

15195775117

Element版


效果图：





组件代码：
是否选定是按逻辑值true,false来标识的


<template><div>
  <el-checkbox v-model="checkbox1">北京</el-checkbox>
  <el-checkbox v-model="checkbox2">上海</el-checkbox>
  <el-checkbox v-model="checkbox3">广州</el-checkbox>
</div></template>

<script>
  export default {
    data() {
      return {
        checkbox1: true,
        checkbox2: false,
        checkbox3: true
      };
    }
  };
</script>



我的思考：
Element版的复选框比基础版的好