質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

214閲覧

vuejs 文字表示 v-for

bskbbb

総合スコア22

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2022/06/17 06:04

実現したいこと:
写真の下にその写真を説明するような文字を表示させたい。
現在の画像の2枚目の写真の下の文字を別の文字にしたい
例えば(なにぬねの、はひふへほ、まみむめも)

現在:
写真の下に文字を表示することはできるが、全て同じ文字になってしまう。
イメージ説明

調べてみたのですがなかなか思うように検索できずにどうしたらいいのかわからなくなってしまったのでお答えいただけると嬉しいです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <ul id="example-1"> <div v-for="item in items"> <img v-bind:src="item.image" width="50" height="50"> <div v-for="word in words" v-bind:class="color(word.message)"> {{ word.message }} </div> </div> </ul> <script type="text/javascript" src="../js/test.js"></script> </body> </html>
var example1 = new Vue({ el: '#example-1', data() { return{ items: [ { image: "../image/food.jpg" }, { image: "../image/taikojaya_1.jpg"}, ], words:[ {message:"あいうえお"}, {message:"かきくけこ"}, {message:"さしすせそ"} ] }; }, methods:{ color(message){ if(message === "あいうえお"){ return "color_red" }else if(message === "かきくけこ"){ return "color_blue" }else if(message === "さしすせそ"){ return "color_green" } }, } })

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

写真の下に文字を表示することはできるが、全て同じ文字になってしまう。

写真のループのなかで、同じもの、つまり words を表示しているのだから、そりゃ全て同じ文字になるでしょうね。

<div v-for="word in words" v-bind:class="color(word.message)"> {{ word.message }} </div>

文字は、itemsのなかにあるべきなのではないですか?

items: [ { image: "../image/food.jpg", message:"あいうえお" }, { image: "../image/taikojaya_1.jpg" message:"かきくけこ"}, ],

投稿2022/06/17 06:44

shiketa

総合スコア3971

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bskbbb

2022/06/17 06:55

おっしゃる通りの指摘でした、、 回答いただきありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問