vuejs的模板功能很强大，下面是一些demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue@2.2.2/dist/vue.js"></script> </head> <body> <div id="app" v-html="htmlDemo"></div> <div id="app1" :id="idDemo">属性</div> <div id="app2">{{msg}}</div> <button id="app3" :disabled="bool">button</button> <div id="app4">{{number + 1}}</div> <div id="app5">{{bool ? 'ok' : 'no'}}</div> <div id="app6" :id="'list-' + idNum"></div> <div id="app7" v-bind:id="rawId | formatId">过滤器</div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { htmlDemo: '<span>hello vue</span>' } }); var app1 = new Vue({ el: '#app1', data: { idDemo: 'myId' } }); var app2 = new Vue({ el: '#app2', data: { msg: '这里只能是字符串' } }); var app3 = new Vue({ el: '#app3', data: { bool: false } }); var app4 = new Vue({ el: '#app4', data: { // number: '1' number: 1 } }); var app5 = new Vue({ el: '#app5', data: { bool: true } }); var app6 = new Vue({ el: '#app6', data: { idNum: 2 } }); var app7 = new Vue({ el: '#app7', data: { rawId: 'demo' }, filters: { formatId: function(value) { if (!value) { return '' }; value = value.toString().toUpperCase(); return value; } } }); </script> </body> </html>