2.5 条件渲染

2.5.1 v-if

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

<div id="app">
  <h1>{{msg}}</h1>
  温度：<input type="number" v-model="temprature"><br>
  天气：
  <span v-if="temprature <= 10">寒冷</span>
  <span v-if="temprature > 10 && temprature <= 25">凉爽
  </span>
  <span v-if="temprature > 25">炎热</span>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data : {
      msg : '条件渲染',
      temprature : 10
    }
  })
</script>

运行效果：

2.5.2 v-else-if、v-else

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。
一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
你也可以使用 v-else 为 v-if 添加一个“else 区块”，当然，v-else 元素也是必须紧跟在一个 v-if 或一个 v-else-if 元素后面

<div id="app">
  <h1>{{msg}}</h1>
  温度：<input type="number" v-model="temprature"><br>
  天气：
  <span v-if="temprature <= 10">寒冷</span>
  <span v-else-if="temprature <= 25">凉爽</span>
  <span v-else>炎热</span>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data : {
      msg : '条件渲染',
      temprature : 10
    }
  })
</script>

2.5.3