web-template.js

<template id="template" rule="v-">
    <h2 class="${title}">${title}</h2>
    <h3 v-if="showh3">h3:${title}</h3>
    <h4 v-if="showh4">h4:${title}</h4>
    <ul class="list">
        <li class="item" v-for="list" key="${item.id}">
            <input type="checkbox" >
            <strong>[key = ${item.id}]</strong>
            ${ item.message }<span>${parseInt(item.num)}</span>
            <div><i v-for="el in item.tag">${index+1}.${el} </i></div>
            <input>
            <button disabled="${item.disabled}">查看</button>
        </li>
    </ul>
    <ul class="demo">
        <li v-for="(value,name,index) of object">
            ${ index  } - ${ name  } : ${ value  }
        </li>
    </ul>
    <div v-for="[1,2,3,4,5].reverse()">${item}</div>
    乘法表
    <div v-for="i in [1,2,3,4,5,6,7,8,9]">
        <span v-for="j in [1,2,3,4,5,6,7,8,9]" v-if="i>=j"> ${i*j} </span>
    </div>
</template>

+

const data = {
        title: 'Title',
        showh3: true,
        showh4: false,
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        },
        list: [
            {
                id: "1",
                message: '特朗普拒与拜登分享总统每日简报荐',
                num: '482万',
                tag: ['A', 'B', 'C'],
                disabled: true
            },
            {
                id: "2",
                message: '最高法指令再审"百香果女孩"案新',
                num: '465万',
                tag: ['A', 'B'],
                disabled: true
            },
            {
                id: "3",
                message: '拜登称特朗普拒认败选很尴尬沸',
                num: '449万',
                tag: ['A', 'B'],
                disabled: true
            }
        ]
    }
}

template.mount(res.data)