画像をふわっと表示させたいです。
index.htmlには
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <img src="image.jpg" v-on:loads="show=true" v-bind:class="{hide:!show}"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="./main.js"></script> </body> </html>
とコードをかき、
main.jsには
var app = new Vue({ el:'#app', })
とコードをかき、
main.cssには
img{ opacity:1; transition:opacity 1s; } img.hide{ opacity:0; }
と書いて実行しました。すると、
[Vue warn]: Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
とエラーが出ました。どの様に修正したらいいでしょうか?
回答1件
あなたの回答
tips
プレビュー