実現したいこと:
写真の下にその写真を説明するような文字を表示させたい。
現在の画像の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" } }, } })
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/17 06:55