changes
This commit is contained in:
Code12121
parent
b43d378bc3
commit
196c5597a4
|
|
@ -0,0 +1,62 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.top_tr {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.widther {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.book_widther {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
tr,
|
||||
td {
|
||||
border: 1px solid rgb(213, 218, 218);
|
||||
;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.top {
|
||||
background-color: rgba(247, 246, 247);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.buy {
|
||||
background-color: rgba(131, 131, 199, 0.616);
|
||||
}
|
||||
|
||||
.sale {
|
||||
background-color: rgba(105, 202, 105, 0.363);
|
||||
}
|
||||
|
||||
.del {
|
||||
background-color: rgba(245, 193, 193, 0.822);
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<div v-if="books.length">
|
||||
<table>
|
||||
<tr class="top">
|
||||
<td class="top_tr book_widther">书名</td>
|
||||
<td class="top_tr widther">作者</td>
|
||||
<td class="top_tr widther">数量</td>
|
||||
<td class="top_tr">操作</td>
|
||||
</tr>
|
||||
<tr v-for="item,index in books">
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.author}}</td>
|
||||
<td>{{item.num}}</td>
|
||||
<td>
|
||||
<button class="buy" @click="buy_item(item.id)">买入</button>
|
||||
<button class="sale" @click="sale_item(item.id)">卖出</button>
|
||||
<button class="del" @click="remove(index)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>你现在没有任何东西哟</h1>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../../JavaScript/vue.js"></script>
|
||||
<script src="../js/index.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
books: [
|
||||
{ id: 871, name: "《西游记》", author: "吴承恩", num: 0 },
|
||||
{ id: 652, name: "《红楼梦》", author: "曹雪芹", num: 0 },
|
||||
{ id: 123, name: "《巴黎圣母院》", author: "雨果", num: 0 },
|
||||
{ id: 014, name: "《悲惨世界》", author: "雨果", num: 0 },
|
||||
{ id: 025, name: "《UNIX编程艺术》", author: "Eric S. Raymond", num: 0 },
|
||||
{ id: 036, name: "《计算机导论》", author: "王志强", num: 0 },
|
||||
{ id: 017, name: "《战争与和平》", author: "列夫·托尔斯泰", num: 0 },
|
||||
{ id: 022, name: "《三国演义》", author: "罗贯中", num: 0 },
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
buy_item(val) {
|
||||
for (let i = 0; i < this.books.length; i++) {
|
||||
if (val == this.books[i].id) {
|
||||
this.books[i].num += 1
|
||||
if (this.books[i].num > 10) {
|
||||
alert("你已经购买了10件不能再买了")
|
||||
this.books[i].num = 10
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
sale_item(val) {
|
||||
for (let i = 0; i < this.books.length; i++) {
|
||||
if (val == this.books[i].id) {
|
||||
this.books[i].num -= 1
|
||||
if (this.books[i].num <= 0) {
|
||||
this.books[i].num = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
remove(val) {
|
||||
this.books.splice(val, 1)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<apps ref="show"></apps>
|
||||
<button @click="add()">+</button>
|
||||
<button @click="remove()">-</button>
|
||||
</div>
|
||||
<template id="apps">
|
||||
<div>
|
||||
<h1>{{num}}</h1>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
<script src="../../JavaScript/vue.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
methods:{
|
||||
add(){
|
||||
this.$refs.show.num+=1
|
||||
},
|
||||
remove(){
|
||||
this.$refs.show.num-=1
|
||||
}
|
||||
},
|
||||
components:{
|
||||
'apps':{
|
||||
template:"#apps",
|
||||
data(){
|
||||
return {
|
||||
num:0
|
||||
}
|
||||
},
|
||||
props:{
|
||||
'app':{
|
||||
type: Number,
|
||||
default() {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue