Vue的学习笔记----006 条件渲染v-if 、v-else、v-show 和列表渲染 v-for

v-if 与 v-else  和 v-show

v-if 与 v-else会判断条件是否成立来渲染页面（会先创建对象然后移除）

v-show 直接根据Boolean值判断是否显示（比v-show直接显示，会比v-if快点）

<template>
  <div id="app">
    <p v-if="isA">isA！</p>
    <p v-else>isB！</p>
    
    <p v-show="!isA">isB！</p>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return{
      isA:false,
    }
  },

}
</script>

<style>

</style>

列表渲染v-for

<template>
  <div id="app">
    <p v-for="(item,index) in arrayList" :key="index">{{item}}</p>
    
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return{
      arrayList:['A','B','C']
    }
  },

}
</script>

<style>

</style>