Vue编程学习之复选框checkbox

15195775117 · 发表于 2021-10-12 10:22:12

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

基础版

效果图：
复选框基础版.png

组件代码：

是否选定是按逻辑值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 · 发表于 2021-10-12 10:30:45

Element版

效果图：

el版复选框.png

组件代码：
是否选定是按逻辑值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版的复选框比基础版的好

		自动登录	找回密码
密码			立即注册