BookShop案例:
一、搭建
使用了semantic-ui框架,搭建整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bookShop.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
</head>
<body>
<div id="app" v-cloak>
<div class="ui container">
<table class="ui table">
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in books">
<th >{
{item.id}}</th>
<th >{
{item.name}}</th>
<th >{
{item.date}}</th>
<th >¥{
{item.price}}</th>
<th >
<button type="button">-</button>
{
{item.num}}