Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#vue.js で if else の条件分岐をする基本 #1043

Open
YumaInaura opened this issue Apr 2, 2019 · 0 comments
Open

#vue.js で if else の条件分岐をする基本 #1043

YumaInaura opened this issue Apr 2, 2019 · 0 comments
Labels
qiita twitter

Comments

@YumaInaura
Copy link
Owner

オンラインエディタ Codepen を利用する

https://codepen.io/yumainaura/pen/eopNVy

image

HTML

  • v-if と v-else の組み合わせで条件分岐を扱えるようだ
  • v- ってなんやねんって思うけど、 vue.js の v だろうな
  • wow が true の時には YES が、 wow が false の時には NO が出力されるようにしておく
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            <span v-if="wow">YES</span>
            <span v-else="wow">NO</span>
        </div>
            
        <script src="index.js"></script>
    </body>
</html>

js の wow: true を wow: false に変えてみる

var app = new Vue({
  el: '#app',
  data: {
-    wow: true
+    wow: false
  }
})

HTML で YES の出力が NO に変わる

image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
qiita twitter
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@YumaInaura