利用vue框架模拟购物车的实现：<!DOCTYPE html><head> <meta charset="UTF-8"> <title>购物车</title> <script src="../js/vue.js"></script>&
利用vue框架模拟购物车的实现：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--购物车表格-->
<table border="1" width="100%">
<thead>
<tr>
<!--v_model表示双向绑定，数据会影响视图，视图也会影响数据-->
<td><input type="checkbox" v-model:checked="checkAll" @click="selectAll()">全选</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>图片</td>
<td>移除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p, i) in list">
<td><input type="checkbox" v-model:checked="p.c" @click="select(i)"></td>
<td>{
{i+1}}</td>
<td>{
{p.name}}</td>
<td>{
{p.price}}</td>
<td>
<input type="button" value="-" @click="minus(i)">
<input type="number" v-model:value="p.count" @blur="change(i)">
<input type="button" value="+" @click="add(i)">
</td>
<td><img width="100" :src="'../images/' + p.img"></td>
<td><input type="button" value="删除" @click="remove(i)"></td>
</tr>
</tbody>
<tfoot>
<td colspan="7">总价<span>{
{total}}</span></td>
</tfoot>
</table>
<!--商品表格-->
<table>
<tbody>
<tr v-for="(p, i) in products">
<td>{
{p.name}}</td>
<td>{
{p.price}}</td>
<td><img width="50" :src="'../images/'+p.img"></td>
<td><input type="button" value="添加至购物车" @cl
最低0.47元/天 解锁文章
2052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
