6.Vue.js- conditions cycle

Conditional

v-if

Using v-if condition determination instructions:

<div the above mentioned id = "App"> 
    <the p-v-IF = "Seen"> Now you see me </ the p-> <Template v-IF = "the ok"> 
      <h1> rookie Tutorial </ h1> 
      <the p-> school is not only technology, but also dream! </ the p-> 
      <the p-> Ha ha ha, typing hard ah! ! ! </ P> </ Template> 
</ div> 
<Script> 
new new Vue ({ 
  EL: '#app', 
  Data: { 
    Seen: to true, OK: to true 
  } 
}) 
</ Script>

Here, v-if the instruction to decide whether to insert element according to the value of the expression seen p (true or false).

In the string template, as Handlebars, so we like to write a conditional block:

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

V-else

Add a "else" blocks to the v-if with v-else instruction:

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if

v-else-if added in 2.1.0, as the name implies, it is used as the v-if else-if blocks. The chain can be used more than once:

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else, v-else-if necessary with the v-if or v-else-if then.

v-show

We can also use the v-show command to display elements according to the conditions:

<h1 v-show="ok">Hello!</h1>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: false
  }
})
</script>
</body>
</html>