Vue.jsで俳句を表示するよ! #俳句プログラミング @pronama
最近バイトの方でVue.jsを勉強したので、プロ生ちゃんのツイートを見かけた瞬間にコードを書き始めました。
do -> poems = [ {creator: "正岡子規", kamigo: "赤とんぼ", nakashichi: "筑波に雲も", shimogo: "無かりけり"}, {creator: "松尾芭蕉", kamigo: "五月雨を", nakashichi: "集めてはやし", shimogo: "最上川"} ] haikuVM = new Vue data: haikus: poems haikuVM.$mount '#haiku' return
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script> <style>h3{white-space: pre }</style> </head> <body> <div id="haiku"> <div v-repeat="haikus"> <h1>{{creator}}</h1> <h3> {{kamigo}}</h3> <h3> {{nakashichi}}</h3> <h3> {{shimogo}}</h3> </div> </div> <script src="./haikuVue.js"></script> </body> </html>