对我来说html最让人不爽的就是结构里杂糅数据。
拿
table来说,稍微多几行就好长一大串东西，要再在标签里改数据，想着都麻烦。
如果让我制作一个人偶，我可不会在搭骨架的同时为它填充泥巴，顺便画个衣服什么的。
html由标签构成一个结构骨架，再由数据填充成为个体，最后为个体加上漂亮的样式。
分成三步来走，这就是我所希望的结构、数据、样式分离，各司其职，降低耦合度。
本篇以表格来做栗子
0：引入Vue:src下的注意相对路径
<script src="js/vue2.5.16.min.js"></script>
1.结构：
1-1：提供一下我写的Emmet形式：
table>(thead>
tr>th[v-
for=
"(one,index) of th" :key=
""]{{
{one}}})(tbody>
tr*3>td[v-
for=
"(one,index) of td$$" :key=
""]{{
{one}}})
1-2：按下Tab键：会自动生成：
<table>
<thead>
<tr>
<th v-for="(one,index) of th" :key="">{{one}}</th>
</tr>
<tbody>
<tr>
<td v-for="(one,index) of td01" :key="">{{one}}</td>
</tr>
<tr>
<td v-for="(one,index) of td02" :key="">{{one}}</td>
</tr>
<tr>
<td v-for="(one,index) of td03" :key="">{{one}}</td>
</tr>
</tbody>
</thead></table>
1-3：这里key=”“都要换为key=”index”，怎么在Emmet实现我不知道，所以手动一下下吧
1-4：最后结构代码：
<table>
<thead>
<tr>
<th v-for="(one,index) of th" :key="index">{{one}}</th>
</tr>
<tbody>
<tr>
<td v-for="(one,index) of td01" :key="index">{{one}}</td>
</tr>
<tr>
<td v-for="(one,index) of td02" :key="index">{{one}}</td>
</tr>
<tr>
<td v-for="(one,index) of td03" :key="index">{{one}}</td>
</tr>
</tbody>
</thead></table>
2.数据：
<script>
new Vue({
el: "#root",
data:{
th:["姓名","职业","性别","血型"],
td01:["捷特","剑士","男","O"],
td02:["龙少","铸造师","男","A"],
td03:["巫缨","弓手","女","B"],
td04:["技画天","艺师","女","A"]
}
})
</script>
3.样式：
<style type="text/css">
table{
font: bold 16px/1.4em "Trebuchet MS", sans-serif;
}
table thead th{
padding: 6px;
border: 1px solid #93CE37;
border-bottom: 1px solid #9ED929;
text-shadow: 1px 1px 1px #568F23;
color: #fff;
background-color: #9DD929;
border-radius: 4px 4px 0px 0px;
}
table tbody td{
padding: 10px;
border: 2px solid #E7EFE0;
text-align: center;
text-shadow: 1px 1px 1px #fff;
color: #666;
background-color: #DEF3CA;
border-radius: 2px;
}
</style>
结果
如果想要改变表格的数据直接在
data里修改就行了，
比起原生的table清爽，简洁太多了。
转载于:https://www.cnblogs.com/toly-top/p/9782020.html
