vue 카 트 선택 기능 실현
그렇게 많은 것 은 말 하지 않 고 바로 코드 를 올리다
<template>
<div id="app">
<input type="checkbox" v-model="checkall" @change="check_all()">
<div v-for="(item,index) in mylist" :key="index">
<span>{{item.oname}}</span><input type="checkbox" v-model="item.this_all" @change="check_list(index)">
<p v-for="(goods,nindex) in item.newlist" :key="nindex">
<input type="checkbox" v-model="goods.check_one" @change="click_input(index,nindex)">{{goods.newname}}--{{goods.price}}
</p>
</div>
<p> :{{allprice}}</p>
<button @click="btn()"> </button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
mylist:[
{oname:" ",this_all:true,newlist:[{newname:" ",check_one:true,price:600},{newname:" ",check_one:true,price:200},{newname:" ",check_one:true,price:150}]},
{oname:" ",this_all:true,newlist:[{newname:" ",check_one:true,price:35},{newname:" ",check_one:true,price:20}]},
{oname:" ",this_all:true,newlist:[{newname:" ",check_one:true,price:200}]},
],
checkall:true,
allprice:0,
cpmylist:[]
}
},
mounted:function(){
this.money();
},
methods: {
money:function(){
var that = this;
this.allprice=0;
that.mylist.forEach(item1 =>{
item1.newlist.forEach(item2 =>{
if(item2.check_one==true){
that.allprice+=item2.price;
}
})
})
},
check_all:function(){
var that = this;
that.mylist.forEach(item1 => {
item1.this_all=that.checkall
item1.newlist.forEach(item2 => {
item2.check_one=that.checkall
})
});
that.money();
},
abc:function(){
var that = this;
var aaa = that.mylist.filter(item2 =>{
return item2.this_all==true
})
aaa.length==that.mylist.length ? that.checkall = true : that.checkall = false
that.money();
},
check_list:function(i){
var that = this;
that.mylist[i].newlist.forEach(item1 =>{
item1.check_one=that.mylist[i].this_all
})
that.abc();
},
click_input:function(i,j){
var that = this;
var checklist = that.mylist[i].newlist.filter(item1 =>{
return item1.check_one==true
})
checklist.length==that.mylist[i].newlist.length ? that.mylist[i].this_all = true : that.mylist[i].this_all = false
that.abc();
},
btn:function(){
var that = this;
that.cpmylist=JSON.parse(JSON.stringify(that.mylist));
that.cpmylist.filter(item1 =>{
item1.newlist = item1.newlist.filter(item2 =>{
return item2.check_one==true
})
})
that.cpmylist=that.cpmylist.filter(item3 =>{
return item3.newlist.length!=0
})
if(that.cpmylist.length==0){
alert(" !")
}else{
console.log("★★★ :");
that.cpmylist.forEach(item4 =>{
console.log("----------"+item4.oname+" ----------");
item4.newlist.forEach(item5 =>{
console.log("――>:"+item5.newname);
})
})
}
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.