Vue模拟简单的订单列表结算页面

最近在学习Vue相关课程，最开始真的有点搞不懂，学习起来很吃力（虽然现在也是），d但通过今天做的小练习，真心觉得vue太友好了，js要十几行代码才能搞定的事，vue几行代码就可以了，不多说，直接把我练习的小案例放上来：
html代码：

<div id="app">
		<!--订单列表 -->
		 <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">订单列表</h3>
            </div>
        </div>
             <!-- 表格 -->
        <table class="table table-bordered" style='text-align: center'>
            <thead>
                <tr>
                	<td>选择</td>
                    <td>品牌</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>总价</td>
                    <td>删除</td>
                </tr