Vue の条件付きレンダリングが機能しない

環境：Mac
Vue.js：3.10.0
こちらのサイトを参考にVueの環境構築しました
https://qiita.com/Mitsuzara/items/4dea8c0aa95d6284980a

Vue の条件付きレンダリングが機能しません。
Trueのみを表示させたいのですが、
エラーも出ておらず、しばらく調べてもわからなかったので質問させていただきます。
どなたかご教授願えれば幸いです。

<div id="app">
    <p v-if="flag">True</p>
    <p v-else>False</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        flag: true,
      }
    })
  </script>

行動規範の内容に同意します

回答2件

ベストアンサー

こんばんは。
リクエスト毎にサーバからHTMLをブラウザに返すような場合（MPAと呼ばれます）は、質問文のような形でページごとにVueインスタンスを作成して描画を行うことが多いです。

この場合はyasutomiさんが書かれているようにvue.jsのファイルを読み込んでindex.htmlとして保存してもらえればファイル単体で動くはずです。

一方で、参考にされているQiitaの記事ではvue-cliを利用されており、主にJavaScript側でページ描画を行う（SPAと呼ばれます）場合に使われることが多いです。
この場合、起点となるindex.htmlに

html
1<div id="app"></div>

があり、src/main.jsでVueインスタンスを生成しています。

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

この起点となるVueインスタンスは最初にindex.htmlにアクセスしたときに作られ、その後のページ遷移などはすべてコンポーネントという概念により描画されることになります。
（index.htmlの#appの中身を随時書き換えるイメージ）
今回作られたプロジェクトだと components/HelloWorld.vue があると思いますが、これがコンポーネントです。

コンポーネントの場合、dataは関数で書かないといけないなど書き方が変わってきますが、
まずはコンポーネントに入る前にindex.htmlでいろいろ試してみるのがよいのではないでしょうか。

投稿2019/08/20 13:33

8zca

総合スコア559

selfstudy

2019/08/24 03:06

ご回答ありがとうございます！！確かに、インストールする際cliとかいてあったので　ん？と思いましたがとりあえずやってみようということでそのままやってました...こういうことがあるのでちゃんとわからなかったら逐一調べるべきですね..ご丁寧に解説いただき本当にありがとうございますm(_ _)mご提案の通りindex.htmlで試してみます！

8zca

2019/08/24 14:57

はい、がんばってくださいね！ cli利用せずにvueファイル読み込んだhtmlを触ってみてわかってきたらvue cliに挑戦しましょう。

行動規範の内容に同意します

Vue.jsはVue.jsのファイルを読み込まないと動作しないです。

html
1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<div id="app">
3  <p v-if="flag">True</p>
4  <p v-else>False</p>
5</div>
6<script>
7new Vue({
8  el: "#app",
9  data: {
10    flag: true
11  }
12});
13</script>