No.58 Vue---条件渲染

一、条件渲染

• 根据条件不同，在页面中渲染不同的内容。

v-if

• v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

v-else

使用v-else指令来表示 v-if 的“else 块”.

<template>
  <p v-if="flag">俺是齊天大聖孫悟空</p>
  <p v-else>你不齊天大聖孫悟空</p>

</template>

<script>
export default {
  data(){
    return{
      flag:false,
    }
  }
}
</script>

 

v-show

<template>
  <p v-if="flag">俺是齊天大聖孫悟空</p>
  <p v-else>你不齊天大聖孫悟空</p>
  <p v-show="flag">你真的是齊天大聖孫悟空嗎</p>

</template>

<script>
export default {
  data(){
    return{
      flag:true,
    }
  }
}
</script>

　

v-show 和v-if 的区别