Q&A
「追記」も同じ箇所に不可視文字があります。
以下のコードで、スタイルが適用されない現象が発生しています。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>My Vue App</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="app"> <h1 :class="{ red:isActive,'bg-color':!isActive"> Hello</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="js/main.js"></script> </body> </html>
styles.css
.red{ color:red; } .bg-color{ background-color:blue; }
main.js
new Vue({ el:'#app', data:{ isActive:true }, })
「index.html」を開いても、画面は真っ白なままでした。
こちらは、何故このような問題が発生しているのでしょうか。
ご助言頂けましたら幸いです
追記です
htmlを以下のように修正したらHelloという文字は出力されましたが、cssは依然適用されないままです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>My Vue App</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="app"></div> <h1 :class="{ red:isActive,'bg-color':!isActive">Hello</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="js/main.js"></script> </body> </html>
間違えて同じHTMLを載せてしまっていた為、再度修正コードを追記しました
「修正コード」も同じ箇所に不要な文字があります。
エディターで確認したのですが、空白などの文字は表示されていませんでした。
どこの部分でしょうか？
「同じ箇所」と書いています。teratail側の書き換えに失敗されているのでは。 https://teratail.com/questions/history-questions/269646
エディターで確認してる限りは、ご提示頂いた「jsfiddle」内の部分には、空白などの文字は存在せず、カーソルもdivの閉じタグの後ろに表示されている状況です。
コピー&ペーストしたのですが、もしかしたら、terateil側で表示されているのとでは、少し、表示に違いがあるのかもしれません
回答3件
0
isActiveの後ろに謎の文字があるからでは？全角スペースかなにか。id=”app”のdivの閉じタグの右にも見えてる
追記
:classに閉じかっこ}がない
html
1<div id="app"> 2 <h1 :class="{red:isActive,'bg-color':!isActive}">Hello</h1> 3</div>
投稿2020/06/12 12:50
編集2020/06/12 13:29
総合スコア3830
ご回答ありがとうございます。
コードの方、見直してみたのですが、全角スペースのような文字は見当たりませんでした。
再度、コードを整形しリロードしてみましたが、画面は真っ白なままでした。
To: study_111さん
https://jsfiddle.net/pyoctv7L/
不可視文字だと思われます。
@kei344さん
ご助言ありがとうございます。
確認しましたら、何らかの文字が入り込んでいたみたいです。
修正しましたら、Helloの文字が表示されたのですが、何故かCSSスタイルは適用されず、「Hello」と表示されているだけになってしまっております。。
0
調べたところ、
html
1 <div id="app"></div> 2 <h1 :class="{ red:isActive ,'bg-color':!isActive}">Hello</h1> 3 </div>
を
html
1<div id="app"> 2 <h1 :class="{red:isActive,'bg-color':!isActive}">Hello</h1> 3</div>
に変えてください。
私はこれでできました。
理由としては、
red:isActive<ここ>,に半角スペースか何かがありました。それと、</div><ここ>にもありました。
投稿2021/06/27 00:03
編集2021/06/27 00:13
総合スコア13
0
html
1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
がうまく読み込めていないか、ソースコードが間違ってるようです。
投稿2021/06/26 23:53
総合スコア13
あなたの回答
tips
プレビュー
