我是靠谱客的博主 顺心过客,这篇文章主要介绍vue label input 实现复选框,现在分享给大家,希望可以做个参考。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template> <div> <div class="box"> <label id="label" :for="item3" :title="item3" :class="{ bg: checkedValue.includes(item3) }" @click="chooseType($event, index3)" v-for="(item3, index3) in type" :key="index3" > <input type="checkbox" :value="item3" :id="item3" v-model="checkedValue" /> <div class="name">{{ text(item3) }}</div> </label> </div> </div> </template> <script> export default { data() { return { checkedValue: [], type: [ "中国中国中国中国中国中国", "美国", "日本", "中国1", "美国2", "日本3", "中国4", "美国5", "日本6", ], }; }, mounted() {}, methods: { chooseType(e, index) { if (e.target.checked) { this.checkedValue.push(e.target.defaultValue); console.log(this.checkedValue.includes(e.target.defaultValue)); } else { this.checkedValue = this.checkedValue.filter( (item) => item != e.target.defaultValue ); } console.log(this.checkedValue, index); }, text(texts) { return texts; }, }, }; </script> <style lang="scss" scoped> .box { width: 600px; display: flex; flex-wrap: wrap; } .bg { color: #ccc; background: chocolate; } .box label { display: flex; align-items: center; margin: 0 10px; cursor: pointer; padding: 5px; margin-bottom: 10px; border-radius: 3px; } .box label input { cursor: pointer; } .box .name { margin-left: 8px; } </style>

最后

以上就是顺心过客最近收集整理的关于vue label input 实现复选框的全部内容,更多相关vue内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(51)

评论列表共有 0 条评论

立即
投稿
返回
顶部