changes
This commit is contained in:
Code12121
parent
1041f3c6b6
commit
19c5534a07
|
|
@ -0,0 +1,74 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item,
|
||||
ul,
|
||||
.bottom {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 400px;
|
||||
background-color: aqua;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 18px;
|
||||
width: 80%;
|
||||
border-top: 1px solid #000;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.left,
|
||||
li>.left {
|
||||
width: 80%;
|
||||
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.right,
|
||||
li>.right {
|
||||
width: 80%;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
li>.left,
|
||||
li>.right {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -5,68 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.item,
|
||||
ul,
|
||||
.bottom{
|
||||
margin: 0 auto;
|
||||
}
|
||||
ul{
|
||||
width: 400px;
|
||||
background-color: aqua;
|
||||
list-style: none;
|
||||
}
|
||||
h2{
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
li{
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
.bottom{
|
||||
font-size: 18px;
|
||||
width: 80%;
|
||||
border-top: 1px solid #000;
|
||||
display: flex;
|
||||
}
|
||||
.left,.right{
|
||||
margin: 15px 0;
|
||||
}
|
||||
.left,li>.left{
|
||||
width: 80%;
|
||||
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.right,li>.right{
|
||||
width: 80%;
|
||||
text-align: right;
|
||||
flex:1;
|
||||
padding-right: 20px;
|
||||
}
|
||||
li>.left,li>.right{
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
.active{
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
}
|
||||
[v-cloak]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
|
@ -86,48 +25,5 @@
|
|||
</div>
|
||||
</body>
|
||||
<script src="../js/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:[
|
||||
{item:"苹果手机",price:6000, isActive: false},
|
||||
{ item: "一加手机", price: 5000, isActive: false},
|
||||
{ item: "oppo手机", price: 4000 , isActive: false},
|
||||
{ item: "vivo手机", price: 3000 ,isActive: false },
|
||||
{ item: "华为手机", price: 2000 , isActive: false },
|
||||
{ item: "小米手机", price: 1000 , isActive: false },
|
||||
{ item: "诺基亚手机", price: 900 , isActive: false },
|
||||
],
|
||||
Item_index:-1,
|
||||
Item_Price:0
|
||||
},
|
||||
methods: {
|
||||
isChange(index){
|
||||
if(this.list[index].isActive==false){
|
||||
this.list[index].isActive=true
|
||||
|
||||
}else{
|
||||
this.list[index].isActive = false
|
||||
}
|
||||
this.Item_index=index
|
||||
},
|
||||
isChangeColor(index){
|
||||
return {active:this.list[index].isActive}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
Total_Price(){
|
||||
if(this.Item_index!=-1){
|
||||
if (this.list[this.Item_index].isActive == true) {
|
||||
this.Item_Price += this.list[this.Item_index].price
|
||||
} else {
|
||||
this.Item_Price -= this.list[this.Item_index].price
|
||||
}
|
||||
}
|
||||
return this.Item_Price;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script src="../js/index.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
list: [
|
||||
{ item: "苹果手机", price: 6000, isActive: false },
|
||||
{ item: "一加手机", price: 5000, isActive: false },
|
||||
{ item: "oppo手机", price: 4000, isActive: false },
|
||||
{ item: "vivo手机", price: 3000, isActive: false },
|
||||
{ item: "华为手机", price: 2000, isActive: false },
|
||||
{ item: "小米手机", price: 1000, isActive: false },
|
||||
{ item: "诺基亚手机", price: 900, isActive: false },
|
||||
],
|
||||
Item_index: -1,
|
||||
Item_Price: 0
|
||||
},
|
||||
methods: {
|
||||
isChange(index) {
|
||||
if (this.list[index].isActive == false) {
|
||||
this.list[index].isActive = true
|
||||
|
||||
} else {
|
||||
this.list[index].isActive = false
|
||||
}
|
||||
this.Item_index = index
|
||||
},
|
||||
isChangeColor(index) {
|
||||
return { active: this.list[index].isActive }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
Total_Price() {
|
||||
if (this.Item_index != -1) {
|
||||
if (this.list[this.Item_index].isActive == true) {
|
||||
this.Item_Price += this.list[this.Item_index].price
|
||||
} else {
|
||||
this.Item_Price -= this.list[this.Item_index].price
|
||||
}
|
||||
}
|
||||
return this.Item_Price;
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue