VUE 学习 StudyLearning-2-条件控制、循环语句

条件控制

<div id="app">
1: v-if 使用
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <p>万类霜天竞自由</p>
    </template>
    

2： v-if/v-else 使用
 <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>

3：v-else-if

  <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>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

for 循环

<div id="app">
1: 典型的 For-In 语句（JS/PHP）
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
  2： for -value：key
    <ol>
    <li v-for="(value,key) in sites">
      {{   }}
    </li>
  </ol>

  3： for -value：key:index
    <ol>
    <li v-for="(value,key,index) in sites">
      {{  }}
    </li>
  </ol>

</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'BaiDu' },
      { name: 'Google' },
      { name: 'SouGo' }
    ]
  }
})
</script>