10~vue中条件渲染

vue中条件渲染

v-if

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

<p v-if="age >= 18">我是成年人</p>

也可以用v-else添加一个else 块

 <p v-if="age >= 18">我是成年人</p>
 <p v-else>我还是一个小朋友</p>

v-else-if 提供的是相应于v-if的“else if 区块”。它可以连续多次重复使用

<div>   
    <p v-if="age > 18">我是成年人</p>
    <p v-else-if="age==18">我今天正好18岁</p>
    <p v-else>我还是一个小朋友</p>
    <p><input type="text" name="" id="" v-model="age"></p>
</div>

案例

<script>
export default {
  data () {
    return {    
       age:18  
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>
<template>
  <!-- template就是模版 -->
  <div>   
    <p v-if="age > 18">我是成年人</p>
    <p v-else-if="age==18">我今天正好18岁</p>
    <p v-else>我还是一个小朋友</p>
    <p><input type="text" name="" id="" v-model="age"></p>
  </div>
</template>
<style>
</style>

<template>元素上使用v-if条件渲染分组

因为v-if 是一个指令, 所以必须将它添加到一个元素上。但是如果想切换多个元素呢?
此时可以把一个 <template>元素当做不可见的包裹元素, 并在上面使用v-if。组中的渲染结果将不包含<template>元素。

案例

<script>
export default {
  data () {
    return {    
       age:18  
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div> 
      <!-- 最终渲染的时候, template这个元素不会被渲染出来,这是一个不可见的包裹元素 -->
    <template v-if="age>=18">
      <p>成年人才能看的内容</p>
      <p>成年人才能看的内容</p>
      <p>成年人才能看的内容</p>
      <p>成年人才能看的内容</p>
    </template>
    <template v-else>
      <p>儿童节目</p>
      <p>儿童节目</p>
      <p>儿童节目</p>
      <p>儿童节目</p>
    </template>
    <p><input type="text" name="" id="" v-model="age"></p>
  </div>
</template>
<style>
</style>

v-show

用法大致和v-if一致, 不同的是带有v-show的元素始终会被渲染并保留在DOM上。
v-show只是简单地切换元素的display css property
注意: v-show 不支持<template>元素, 也不支持v-else。

案例

<script>
export default {
  data () {
    return {    
       sex:'woman'  
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div> 
    <p v-show="sex=='man'">男生</p>
    <p v-show="sex=='woman'">女生</p>
  </div>
</template>
<style>
</style>

效果

v-if和v-show的区别

• v-show 只是简单地切换元素的display属性, 带有v-show的元素会**始终保留**在DOM元素中。
• v-if 只要后面为false, 对应的元素以及子元素都不会被渲染, 控制DOM元素的创建和销毁。
• 当我们频繁的切换状态的时候, 使用v-show会更好一些; 当运行时,条件很少改变,或者是一次性的渲染, 使用v-if会更佳。

案例

<script>
export default {
  data () {
    return {    
       sex:'woman',
       isShow:false
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div> 
    <h2 v-if="isShow">v-if显示标题内容</h2>
    <h2 v-show="!isShow">v-show显示标题内容</h2>    
  </div>
  <button @click="isShow=!isShow">改变isShow</button>
</template>
<style>
</style>