<!DOCTYPE html>
<body>
<div id="app">
<table>
<tr>序号
<td>
<div v-for="book in books">{
{
book.id }}</div>
</td>
</tr>
<tr>商品名称
<td><div v-for="book in books">{
{
book.title }}</div></td>
</tr>
<tr>单价
<td><div v-for="book in books">{
{
book.price }}</div></td>
</tr>
<tr>数量
<td><div v-for="book in books">{
{
book.quality }}</div></td>
</tr>
<tr>金额
<td><div v-for="book in books">{
{
book.price * book.quality }}</div></td>
</tr>
<tr>总价
<td><div v-for="book in books">{
{
book.price * book.quality }}</div></td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
books: [
{
id: 1, title: 'Java无难事', price: 188},
{
id: 2, title: 'VC++深入详解', price: 168},
{
id: 3, title: 'Servlet/JSP深入详解', price: 139},
],
quality:0,
}
},
computed: {
totalPrice() {
return book.price * Number
}
}
})
app.mount('#app')
</script>
</body>
</html>
正确的版本
<!DOCTYPE html>
<style>
body {
width: 600px;
}
table {
border: 1px solid black;
}
table {
width: 100%;
}
th {
height: 50px;
}
th, td {
border-bottom: 1px solid #ddd;
text-align: center;
}
span {
float: right;
}
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app">
<table>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
<tr v-for="(book, index) in books" :key="book.id">
<td>{
{
book.id }}</td>
<td>{
{
book.title }}</td>
<td>{
{
book.price }}</td>
<td><button v-bind:disabled="book.count === 0" v-on:click="book.count-=1">-</button>{
{
book.count }}
<button v-on:click="book.count+=1">+</button></td>
<td>{
{
itemPrice(book.price, book.count) }}</td>
<td><button @click="deleteItem(index)">删除</buuton></td>
</tr>
</table>
<span>总价： ￥{
{
totalPrice }}</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
books: [
{
id: 1, title: 'Java无难事', price: 188, count: 1},
{
id: 2, title: 'VC++深入详解', price: 168, count: 1},
{
id: 3, title: 'Servlet/JSP深入详解', price: 139, count: 1},
],
}
},
methods: {
itemPrice(price, count) {
return price * count
},
deleteIetm(index) {
this.books.splice(index, 1)
}
},
computed: {
totalPrice() {
let total = 0;
for(let book of this.books) {
total += book.price * book.count
}
return total;
}
}
})
app.mount('#app')
</script>
</body>
</html>