In the process of learning vue this time, many components are involved and the corresponding attributes in each component are involved. Then this case is relatively speaking to combine the components frequently used in vue, so that practice makes perfect, and for the future The development of good foundation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 500px;
border: 1px solid #000;
border-collapse: collapse;
text-align: center;
}
th, tr, td {
border: 1px solid #000;
}
</style>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<div v-if="books.length == 0">购物车为空</div>
<div v-else>
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>出版日期</th>
<th>价钱</th>
<th>数量</th>
<th>操作</th>
<tbody>
<tr v-for="(book,index) in books">
<td>{
{
index + 1}}</td>
<td>{
{
book.name}}</td>
<td>{
{
book.date}}</td>
<td>{
{
book.price}}</td>
<td>
<button :disabled="book.index <= 1" v-on:click="sub(index)">-</button>
//disabled作用就是当书籍小于1的时候禁用状态，不可以点击
<span>{
{
book.count}}</span>
<button v-on:click="add(index)">+</button>
</td>
<td>
<button @click="del()">移除</button>
</td>
</tr>
</tbody>
</tr>
</thead>
</table>
<br>
总价钱：{
{
total}}
</div>
</div>
</body>
</html>
<script>
<!-- 声明组合式api-->
const {
createApp, reactive, toRefs,computed} = Vue
// 创建一个vue应用
createApp({
// 定义数据，方法等都写在setup函数中
setup() {
//定义的数据
let count = 0;
const data = reactive({
books: [
{
name: '平凡的世界', date: '2010-12', price: 50, count: 1},
{
name: '红楼梦', date: '2010-12', price: 20.5, count: 1},
{
name: '水浒传', date: '2010-12', price: 100, count: 1},
{
name: '三国演绎', date: '2010-12', price: 150, count: 1},
], count
})
const del = (index) => {
data.books.splice(index, 1)
}
//计算方法
const total = computed(() => {
let count = 0;
for (const b of data.books) {
count += b.price * b.count
}
return count;
})
const add = (i) => {
data.books[i].count++
}
const sub = (i) => {
data.books[i].count--
if (data.books[i].count <= 1){
data.books[i].count = 1;
}
}
//定义的数据和方法都需要return返回
return {
...toRefs(data), add, sub, del, total}
}
}).mount('#app')
</script>
operation result:
