1. 介绍
这是一个Vue实例,实现一个简单的购物车功能。用于实践Vue的数据绑定,条件,循环,父子通信等功能。
2. 代码实现步骤
2.1 初始界面显示
<body>
<div id="a_div">
<table style="width: 99%;" border="2px">
<tr>
<th>
<label for="quan">
<!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->
<input id="quan" type="checkbox" > 全选
</label>
</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="item,index in data1">
<td style="text-align: center;">
<input type="checkbox" >
</td>
<td>{
{item.name}}</td>
<td>{
{item.price}}</td>
<td><input type="text" v-model="item.sum" /></td>
<td>{
{item.price*item.sum}}</td>
<td>
<button type="button" v-on:click="remove(item.name)">删除</button>
</td>
</tr>
</table>
<div v-if="">
共{
{ count }}件商品 购物车总金额:¥{
{total}}元
</div>
</div>
</body>
数组定义
<script type="text/javascript">
new Vue({
el: '#a_div',
data: {
data1: [{
name: '玻璃珠',
price: 19.9,
sum: 5,
value: 'bolizhu'
}, {
name: '三国演义',
price: 39.9,
sum: 10,
value: 'sanguoyanyi'
}, {
name: <