teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2021/01/22 02:56

投稿

neko_daisuki
neko_daisuki

スコア2090

answer CHANGED
@@ -91,4 +91,15 @@
91
91
  ```
92
92
  [v-bind](https://jp.vuejs.org/v2/api/#v-bind)
93
93
 
94
- [サンプル](https://jsfiddle.net/3tgpLdoc/)
94
+ [サンプル](https://jsfiddle.net/3tgpLdoc/)
95
+
96
+ # 追記(コメントへの回答です)
97
+
98
+ **方法1**
99
+ [押されたボタンとテキストの状態によってclickの振る舞いを変える](https://jsfiddle.net/zcau3k76/)
100
+
101
+ **方法2**
102
+ [ボタンをA, B, C, D と用意しておき、クリックされたボタンによって表示を切り替える](https://jsfiddle.net/e0v85ws7/)
103
+
104
+ 方法1 はコードがカオスになりがち、方法2 はボタンの順番を制御(たとえば C B という並びに)できません。
105
+ 順番を制御するには、それぞれのボタンをコンポネントに切り出し[動的なコンポネント](https://jp.vuejs.org/v2/guide/components.html#%E5%8B%95%E7%9A%84%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88)で切り替えます。(もっといい方法があるかも)