vue는 단일 선택, 다중 선택, 모두 역선택 및 모두 선택 안 함(코드 포함) 기능을 어떻게 구현합니까?
- 不言원래의
- 2018-09-08 17:50:087861검색
이 글의 내용은 Vue가 단일 선택, 다중 선택, 역선택, 전체 선택 기능을 구현하는 방법에 대한 내용입니다(코드 첨부). 도움이 필요한 친구들이 참고할 수 있습니다. 도움이 되길 바랍니다.
라디오 선택
v-for를 사용하여 데이터 세트를 렌더링할 때 이를 구별하기 위해 인덱스를 가져올 수 있습니다. 여기서는 이 인덱스를 사용하여 간단히 라디오 선택을 구현합니다.
0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb
첫 번째 선택은 selectedNum을 정의하는 것입니다. 항목을 클릭하면 selectedNum이 클릭한 항목의 인덱스로 변경된 다음 selectedNum이 자신과 같은지 확인하기 위해 각 항목이 추가됩니다.
누구나 번호를 갖고 있는 것과 동일하게 마우스 클릭만으로 당첨번호가 생성되고, 당첨번호가 본인인지 아닌지 판단이 가능합니다. 와 대단해요~
코드는 다음과 같습니다.
data() {
return {
selectedNum:"",
radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
};
},
methods: {
//单选
select(i) {
this.selectedNum = i;
},
}객관식
다중 선택의 원리는 단일 선택과 동일하지만 이번에는 단일 선택이 아닌 배열을 유지해야 합니다Num
<li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?'active':''" @click="check(index)">{{item}}</li>인덱스도 사용합니다~ 상품을 선택하는 사람은 같지만 이건 당첨된 사람이 많을 때 한 번 클릭하면 한 사람이 당첨됩니다. 이 사람의 인덱스가 당첨 목록 체크박스에 나타나면 그 사람이 선택됩니다~
한 번 클릭하고 인덱스를 체크박스에 밀어 넣으면 코드가 작성됩니다. 확인란에 이 색인이 있으면 한 번 클릭하여 선택하고 다시 클릭하여 취소하세요.
//多选
check(i){
var idx = this.checkbox.indexOf(i);
//如果已经选中了，那就取消选中，如果没有，则选中
if(idx>-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(i);
}
},
다음으로 전체선택, 전체취소, 역선택 구현에 대해 적어보겠습니다.
//选中全部
checkAll(){
//中奖的人就这么多，而且他们的index都是0到length-1的（v-for渲染），一顿数组基本操作即可
var len = this.checkboxList.length;
this.checkbox = [];
for(var i=0;i311cd1cb4c7f915bb77f171abfb1a2fc-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(i);
}
}
}
모두 선택하고 모두 취소하려면 버튼 하나만 필요한 경우가 많기 때문에 완전히 선택되었는지 판단해야 합니다. 계산에서 모두 선택 여부를 자동으로 계산합니다.
c93d9d746228ad54d582b9b52a1546f4{{isCheckAll?'取消全选':'选择全部'}}65281c5ac262bf6d81768915a4a77ac0
computed: {
//判断是否全部选中
isCheckAll(){
if(this.checkbox.length==this.checkboxList.length){
return true;
}
return false;
}
},
그런 다음 이러한 기능을 이 이중 기능 버튼에 바인딩하면 됩니다
letsGetThisFuckingCheck(){
//如果全选，就是清空选择；如果不是，那就全都安排一下
if(this.isCheckAll){
this.clearCheckbox();
}else{
this.checkAll()
}
},
완전한 코드
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b
e388a4556c0f65e1904146cc1a846bee单选框94b3e26ee717c64999d7867364b1b4a3
ff6d136ddc5fdfeffaf53ff6ee95f185
0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
e388a4556c0f65e1904146cc1a846bee多选框94b3e26ee717c64999d7867364b1b4a3
ff6d136ddc5fdfeffaf53ff6ee95f185
37d349a997ba060025b794f498115081{{item}}bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
c93d9d746228ad54d582b9b52a1546f4{{isCheckAll?'取消全选':'选择全部'}}65281c5ac262bf6d81768915a4a77ac0
79162f310a08887208df5d3e33f513a3反选65281c5ac262bf6d81768915a4a77ac0
16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
components: {},
data() {
return {
selectedNum:"",
radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
checkbox:[],
checkboxList:["某个元素", "某个元素", "某个元素", "某个元素", "某个元素","某个元素", "某个元素"],
};
},
computed: {
//判断是否全部选中
isCheckAll(){
if(this.checkbox.length==this.checkboxList.length){
return true;
}
return false;
}
},
methods: {
//单选
select(i) {
this.selectedNum = i;
},
//多选
check(i){
var idx = this.checkbox.indexOf(i);
//如果已经选中了，那就取消选中，如果没有，则选中
if(idx>-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(i);
}
},
letsGetThisFuckingCheck(){
if(this.isCheckAll){
this.clearCheckbox();
}else{
this.checkAll()
}
},
//选中全部
checkAll(){
var len = this.checkboxList.length;
this.checkbox = [];
for(var i=0;i363dfbc6f5fc95588c3de13971e480d8-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(i);
}
}
}
}
};
2cacc6d41bbb37262a98f745aa00fbf0
c977fa5678fe78cf54b097005108eb8c
li{
display: inline-block;
font-size: 16px;
padding: 5px;
background-color: #e6e6e6;
margin: 5px 10px;
cursor: pointer;
}
.active {
border: 2px solid red;
}
531ac245ce3e4fe3d50054a55f265927
관련 권장 사항:
vue를 사용하여 모두 선택 및 역선택 기능을 구현하세요
Realize complex jQuery를 기반으로 marquee_jquery
의 모두 선택, 모두 선택 해제 및 역선택 기능을 제공합니다.위 내용은 vue는 단일 선택, 다중 선택, 모두 역선택 및 모두 선택 안 함(코드 포함) 기능을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!