Preface
Checkbox multi-check boxes are very common, and they are used in almost many places. In the past two days, checkbox multi-check function needs to be used when using the vue framework. It really makes me a headache. The usage of vue and native checkbox is different. The checkbox used in vue before was just a component written by others. This time I went through a lot of tricks when I implemented it myself. I wrote this article to record it and provide a reference for latecomers.
Before this, let's take a look at the usage of native checkbox with jquery values
<input type="checkbox" name="hobby" value="swim">swim
<input type="checkbox" name="hobby" value="fitness">fitness
<input type="checkbox" name="hobby" value="travel">travel
$(".section1 input[type=checkbox][name=hobby]").change(function(){
var obj = ("hobby");
var check_val = [];
for(k in obj){
if(obj[k].checked){
check_val.push(obj[k].value);
}
}
$(".section1 .res").text(check_val);
});
Checkbox disabled
<input type="checkbox" name="hobby" value="swim" checked disabled="true">swim
Usage of checkbox in vue
In vue, v-model is actually checked syntax sugar. V-model is used to determine whether the current checkbox is selected. It binds an array, and the value of the selected item will be automatically added to the array
<div>Please choose your hobby(vue)</div>
<input type="checkbox" v-model="hobby2" value="swim">swim
<input type="checkbox" v-model="hobby2" value="fitness">fitness
<input type="checkbox" v-model="hobby2" value="travel">travel
<div>You've selected：{{hobby2}}</div>
var vm = new Vue({
el: '#app',
data:{
msg:'hello',
hobby2:[]
},
created(){
('created')
},
method:{
login:function(){
alert(1)
}
}
})
Checkbox is disabled in vue
If we ask the option to select at least one value, we will use disabled to prohibit the user from unclicking the option.
Here we mainly control the checkbox option selection or cancellation by setting the value of hobby2.
1. First set a default value of hobby2 array:['Swimming']
2. Add input click event
<input type="checkbox" v-model="hobby2" value="swim" @click="handleClick">swim
handleClick:function(ev){
var that = this;
setTimeout(function(){
('this.hobby2',,that.,that.hobby2)
if(!){
if(that.==1){
= that.hobby2[0];
}
if(that.==0){
that.()
}
}
},1)
}
1. By obtaining the value of the click event, determine whether the current click status is cancelled or selected.
If the state is cancelled, it is judged that the current hobby2 length is 0 and the last checkval last value is added to the push, so that the last option cannot be cancelled.
The value of lastcheckval needs to be saved when the hobby2 array length is 1.
setTimeout asynchronous
If you do not use setTimeout asynchronously, when you click to select or cancel the option, the value in the array hobby2 is still the result of the previous option. In order to ensure that the setTimeout is consistently added to solve the problem.
Just now, we prohibited the user from canceling the last option by controlling the value of hobby2 in v-model. So what if we want to implement such a function?
1. The user can only select 2 options at most (interaction effect: When the current option length is 2, when the user selects a new option, the first option will be cancelled, and so on)
When checked is false, add the following code. When hobby2 length is greater than 2, delete the first element.
if(that.>2){
that.(0,1);
}
Custom checkbox style
The default checkbox style is very ugly, and the display effects of different browsers are also different. If we design the picture, we need to customize the style.
Contains vue checkbox option to disable custom checkbox style
principle
1. Wrap the input through the label label to bind the input id through the label for. When the label is clicked, it is actually the input that is clicked.
Set input opacity: 0; not visible
2. Set the default style of checkbox and the selected state style by giving the div
.section3 .checkboxlist{}
.checkboxlist label{
margin-left: 10px;
}
.checkboxlist .checkbox{
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #eee;
margin-right: -20px;
}
.checkboxlist .{
background: blue;
}
.checkboxlist input{
opacity: 0;
}
Checkbox option checkbox option dynamically add checked class to determine whether the current option value exists in hobby3 to think whether the checked class is bound to the checked class
:class="('swim')!=-1?'checked':''"
<label for="swim">
<div class="checkbox" :class="('swim')!=-1?'checked':''"></div>
<input type="checkbox" v-model="hobby3" value="swim" @click="handleClick">swim
</label>
<label for="fitness">
<div class="checkbox" :class="('fitness')!=-1?'checked':''"></div>
<input type="checkbox" v-model="hobby3" value="fitness" @click="handleClick">fitness
</label>
<label for="travel">
<div class="checkbox" :class="('travel')!=-1?'checked':''"></div>
<input type="checkbox" v-model="hobby3" value="travel" @click="handleClick">travel
</label>
<label for="climb mountains">
<div class="checkbox" :class="('climb mountains')!=-1?'checked':''"></div>
<input type="checkbox" v-model="hobby3" value="climb mountains" @click="handleClick">climb mountains
</label>
Summarize
The above is a summary of the usage of checkbox in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!