5、条件与循环

1、条件

条件判断使用 v-if 指令。

<template>
  <div id="app">
    <div v-if="flag">你能看到我吗？</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //true：显示
        flag: false
      }
    }
  }
</script>

可以用 v-else 指令给 v-if 添加一个 "else" 块

<template>
  <div id="app">
    <div v-if="flag">你能看到我吗？</div>
    <div v-else>你能看到我</div>
  </div>
</template>

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

v-else-if 在 2.1.0 新增，用作 v-if 的 else-if 块

<template>
  <div id="app">
    <div v-if="type==='A'">我是A</div>
    <div v-else-if="type==='B'">我是B</div>
    <div v-else-if="type==='C'">我是C</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        type: 'A'
      }
    }
  }
</script>

可以使用 v-show 指令来根据条件展示元素

<template>
  <div id="app">
    <div v-show="flag">我显示出来吧</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //true：显示
        flag: true
      }
    }
  }
</script>

2、循环

循环使用 v-for 指令

<template>
  <div id="app">
    <table>
      <tr>
        <td>新闻标题</td>
        <td>作者</td>
      </tr>
      <tr v-for="item in news">
        <td>{{item.title}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        news: [
          {title: '新闻一', author: '张三'},
          {title: '新闻二', author: '李四'},
          {title: '新闻三', author: '王五'},
          {title: '新闻四', author: '赵六'}
        ]
      }
    }
  }
</script>

也可以提供第二个的参数为索引

<template>
  <div id="app">
    <table>
      <tr>
        <td>序号</td>
        <td>新闻标题</td>
        <td>作者</td>
      </tr>
      <tr v-for="(item,key) in news">
        <td>{{key}}</td>
        <td>{{item.title}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        news: [
          {title: '新闻一', author: '张三'},
          {title: '新闻二', author: '李四'},
          {title: '新闻三', author: '王五'},
          {title: '新闻四', author: '赵六'}
        ]
      }
    }
  }
</script>