用户登录

给用户提供一些选项,让用户可以选择其中的一些选项,这就是 Checkbox,也就是复选框的功能。复选框可以只有一个,也可以是一组。我们先看一下单独一个复选框的用法。

在这个组件里,先在 data 里面添加一个数据,名字是 checked ,默认让它等于 true。

然后在组件的模板里添加一个 input 元素,类型设置成 checkbox,这样就会得到一个复选框。然后用 Vue 提供的 v-model 绑定一个数据给这个复选框,比如 checked。

下面可以给这个复选框添加一个 label ,也就是标签,标签就是在复选框旁边显示的文字,标签内容是 Checked 冒号,后面再绑定输出 checked 这个数据。

回到浏览器测试一下这个复选框,现在这个复选框是被勾选的状态,因为给它的 v-model 提供的 checked 这个数据的值默认是 true。 点一下这个复选框,状态会变成未勾选的状态,checked 数据的值就会变成 false。

注意现在只能点击这个复选框才能切换它的勾选状态,如果你想点击标签也能切换这个复选框的状态需要再处理一下。首先得在这个复选框元素上面添加一个 id 属性,随便设置一下值,比如 checked ,然后在下面这个 label 元素上面,添加一个 for 属性,它的值就是复选框元素上的 id ,这里就是 checked 。

再回到浏览器测试一下,现在点击复选框旁边的标签,也可以切换复选框的状态。

复选框(Checkbox)《 Vue.js 前端应用 #3:表单元素 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点