diff --git a/08-综合练习/商品列表/css/css.css b/08-综合练习/商品列表/css/css.css new file mode 100644 index 0000000..ff0cbcd --- /dev/null +++ b/08-综合练习/商品列表/css/css.css @@ -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; + } \ No newline at end of file diff --git a/08-综合练习/商品列表/index/index.html b/08-综合练习/商品列表/index/index.html index 0f71124..6feb3e0 100644 --- a/08-综合练习/商品列表/index/index.html +++ b/08-综合练习/商品列表/index/index.html @@ -5,68 +5,7 @@ Document - +
@@ -86,48 +25,5 @@
- + \ No newline at end of file diff --git a/08-综合练习/商品列表/js/index.js b/08-综合练习/商品列表/js/index.js new file mode 100644 index 0000000..378b75d --- /dev/null +++ b/08-综合练习/商品列表/js/index.js @@ -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; + } + } +}) \ No newline at end of file