Vue框架学习–购物车实例的实现
需求分析
购物车需要展示已加入商品列表,包括商品名称,商品单价,购买数量,操作信息,在此基础上添加一个全选按钮,总价只包括选中商品的总价。。。
代码实现
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车示例</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th>
<button
@click="checkAll"
>全选</button>
</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list"