console
var obj = {
amount:100,
rate:0.2,
peilv:3,
qishu:10
}
new Vue({
el: '#app',
data: obj
});
<html>
<body>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td,
table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
padding: 5px;
white-space: nowrap;
}
table thead th {
background-color: #CCE8EB;
width: 160px;
white-space: nowrap;
padding: 5px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: #F5FAFA;
}
body {
margin: 0;
}
</style>
<div id="app">
<p>{{ amount }}</p>
<p>{{ rate }}</p>
<p>{{ peilv }}</p>
<p>{{ qishu }}</p>
<table style="font-size: 14px;font-family: SimSun,'Microsoft YaHei UI',serif;">
<thead>
<tr>
<th>渠道</th>
<th>区域</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>测试账号-厂商版</td>
<td>北方福瑞1</td>
<td>累计<br/>(截止2021-08-01)</td>
</tbody>
</table>
</div>
</body>
</html>