Vue学习笔记：2.v-if、v-show以及v-for

1.v-if和v-show

(1).原理不同：v-show的原理是display属性值的切换，v-if是真正的条件渲染

(2).v-if可以与template结合使用，template不会被渲染出来，v-show不可以

(3).v-if可以与v-else、v-else-if结合使用

2.v-for的基本使用

(1).v-for遍历数组：v-for = "(item,index) in array"

(2).v-for遍历对象：v-for = "(value,key,index) in obj"

(3).也可以用 item of items，更接近js的迭代语法

<template>
    <!--单个条件渲染  -->
  <div v-if="isShow">出现又离开</div>
  <button @click="toggle">切换</button>

  <!-- 多条件渲染 -->
  <div>
      <input type="text" v-model="score">
      <div v-if="score>90">优秀</div>
      <div v-else-if="score>60">良好</div>
      <div v-else>不及格</div>
  </div>
  <!-- v-if是惰性的，当条件为false时，其内容完全不会渲染 -->
  <!-- 可以考虑与template结合使用，因为template不会被渲染出来 -->
  <template v-if="isShow">
      <div>template不会被渲染</div>
  </template>
  <!-- v-show不支持template，原理是display：none和block的切换 -->
  <div v-show="isShow">测试v-show</div>

  <!-- v-for的使用 -->
  <div>
      <!-- v-for遍历数组 -->
      <ul>
          <li v-for="(item,index) in movies">{{index+1}}.{{item}}</li>
      </ul>
      <!-- v-for遍历对象 -->
      <ul>
          <li v-for="(value,key,index) in info">{{index+1}}-{{key}}-{{value}}</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'ConRender',
  data () {
    return {
      isShow: true,
      score:0,
      movies:[
          "星际穿越",
          "盗梦空间",
          "大话西游",
          "火星救援"
      ],
      info:{
          name:'why',
          age:18,
          home:'chongqing'
      }
    }
  },
  methods: {
      toggle(){
          this.isShow = !this.isShow
      }
  }
}
</script>

<style scoped>

</style>