車いすなコーダーAbout小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。赤い電動車いすに乗って生活をしています。不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。AprJavaScriptVue.jsさてさて、だいぶご無沙汰更新となってしまいましたが、皆様いかがお過ごしでしょうか...?雪も溶けだいぶ春な感じになり、ようやく車いすでも活動しやすくなってきたこの辺りで、記事を更新しようと思います...!タイトルの通り、今回もVue.jsのサンプルを作って遊んでみたのでコードを交えながら紹介していきます。実際のサンプルを見ながら記事を読んだ方が分かりやすいかと思いますので、以下ボタンよりご確認ください!サンプルを確認するコンテンツ一覧HTML側の記述について今回は以下の要素を設けることにしました。RGBそれぞれのレンジ入力欄(スライダー:最大値は255とする)レンジ入力欄の値によって色変化するdiv(プレビュー的な)「ストックする」ボタンストックされたカラー一覧カラーが1つもストックされていない場合のメッセージそれぞれの記述について、解説します。</div></div>RGBそれぞれの文字部分にも背景色を設定しており、スライダーの値によって変化するようにしてます。'+b+')'}"></div>CSSのrgb指定に使う値をデータバインディングさせ、描画させています。ストックする</a>stockColorという関数をVue.js側で定義しており、ボタンクリックで実行させるようにしてます。</li></ul>「ストックする」ボタンにより、その値が配列に追加されるようになってますので、ループさせてます。それぞれのli内にはその色を削除できるボタンも設けてます。カラーはストックされておりません。</p>activeという値のtrue/falseによる条件分岐が適用されてます。コンテンツ一覧へ戻るVue.js側の記述について全コードは次のようになります。)それでは、細かく分けて解説していきます。false},まずはRGBそれぞれの値ですね。colorsは色一覧を描画するための配列になります。activeについてですが、こちらはカラーが1つ以上ストックされているか判定させるための真偽値になります。カラーが1つもストックされていない場合「まだカラーはストックされておりません。」というpタグを出しておくために使います。}}定義する関数については「ストックする」ボタンにより実行されるstockColorと、カラー一覧それぞれに設けられている「削除」ボタンにより実行されるdeleteColorの2つになります。関数の処理内容については、次のようになります。stockColoractive変数をtrueにする(1つもストックされていない場合に表示されるメッセージが消える)colors配列の先頭にデータを追加deleteColorcolors配列から該当するデータを削除するcolors配列が空になった場合、active変数をfalseにする(1つもストックされていない場合に表示されるメッセージが表示される)コンテンツ一覧へ戻る改めて、この結果サンプルへのリンクを貼っておきます。サンプルを確認するさて、次はどういう記事を書こうかな。Posts2019.07.15「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。