
コンポーネントをorderで並び替え
Vue.jsのコンポーネントをCSSのorderで動的に並び替えたいことがあったのでサンプルコードを記述してみた。
まず、vue createでmy-orderを作成。
$ vue create my-order
App.vueにHTML, JavaScript, CSSを記載。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < template > < div > < p >select: {{ select }}</ p > < p > appBlue: < input type = "number" v-model = "select.appBlue" value = "1" >< br > appGreen: < input type = "number" v-model = "select.appGreen" value = "2" >< br > appRed: < input type = "number" v-model = "select.appRed" value = "3" > </ p > < div class = "flex" > < app-blue v-if = "select.appBlue" :style = "{order: select.appBlue}" /> < app-green v-if = "select.appGreen" :style = "{order: select.appGreen}" /> < app-red v-if = "select.appRed" :style = "{order: select.appRed}" /> </ div > </ div > </ template > |
コンポーネントをcomponentsフォルダに入れて読み込む。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import Blue from "./components/Blue.vue" ; import Green from "./components/Green.vue" ; import Red from "./components/Red.vue" ; export default { data() { return { select: { appBlue: 1, appGreen: 2, appRed: 3 } }; }, components: { appBlue: Blue, appGreen: Green, appRed: Red } }; |
1 2 3 4 5 6 7 8 9 10 | p { text-align : center ; } input { width : 50px ; } . flex { display : flex ; flex-flow : column; } |
Blue.vueはこのように。(他2つは色違い)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < template > < div >appBlue</ div > </ template > < style scoped> div { width: 50%; border: 1px solid blue; background-color: lightblue; padding: 10px; margin: 10px auto; text-align: center; } </ style > |
以上で完成。