Vue用v-for实现结构、数据、样式分离(示例1)

对我来说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",//与id是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清爽，简洁太多了。