show-hei https://blog.hatena.ne.jp/show-hei/ ROXX開発者ブログ https://techblog.roxx.co.jp/ Nuxt.js ROXX エンジニアの匠平(@show60)です。 同じようなタグが繰り返されているのを見ると、どうにかスッキリまとめられないもんかなと思いますよね。 今回はアイコンコンポーネントを例に、 v-for 内で動的な指定と、クラス名、イベントハンドラの設定までやってみようと思います。 v-for のループ内で任意のカスタムタグを指定する ユースケースとしては、バラバラのコンポーネントを並べたいときなどでしょう。 1 つのアイコンのみを含んだコンポーネントがあるとして、並びに規則性のある場合には 1 つずつタグを置いてスタイルを設定するよりもコード量が減ってスッキリします。 下記のコードを例にすると… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftechblog.roxx.co.jp%2Fentry%2F2019%2F08%2F15%2F194652" title=" v-for 内でコンポーネント、クラス名、イベントハンドラまで動的に指定する - ROXX開発者ブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2019-08-15 19:46:52 rich https://techblog.roxx.co.jp/entry/2019/08/15/194652 1.0 100%