Vue:条件&循环渲染

Vue:条件&循环渲染

2.7、条件渲染

2.7.1 v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 时才被渲染。例如在一个简单的用户登录状态判断场景中：

<div id="app">
    <p v-if="isLoggedIn">欢迎回来，用户！p>
    <p v-if="!isLoggedIn">请先登录。p>
div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            isLoggedIn: false
        }
    });
script>

还可以结合计算属性使用 v-if，以处理更复杂的条件逻辑。比如判断用户是否是高级会员且积分大于 1000：

<div id="app">
    <p v-if="isEligibleForReward">您有资格获得奖励！p>
div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            isPremiumMember: false,
            points: 800
        },
        computed: {
            isEligibleForReward() {
                return this.isPremiumMember && this.points > 1000;
            }
        }
    });
script>

2.7.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 元素后面。
需求：根据温度判断天气情况

温度：<input type="number" v-model="temprature" ><br /><br />
天气：<span v-if="temprature <= 10">寒冷span>
<span v-else-if="temprature <= 25">凉爽span>
<span v-else>炎热span>
<hr>

还可以增加更多的判断区间，如：

温度：<input type="number" v-model="temprature" ><br /><br />
天气：<span v-if="temprature <= 0">极寒span>
<span v-else-if="temprature <= 10">寒冷span>
<span v-else-if="temprature <= 25">凉爽span>
<span v-else-if="temprature <= 35">炎热span>
<span v-else>酷热span>
<hr>

同时，可以结合函数来处理条件判断，使代码更具可读性和可维护性：

温度：<input type="number" v-model="temprature" ><br /><br />
天气：<span v-if="getWeatherCondition(temprature) === '极寒'">极寒span>
<span v-else-if="getWeatherCondition(temprature) === '寒冷'">寒冷span>
<span v-else-if="getWeatherCondition(temprature) === '凉爽'">凉爽span>
<span v-else-if="getWeatherCondition(temprature) === '炎热'">炎热span>
<span v-else>酷热span>
<hr>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            temprature: 20
        },
        methods: {
            getWeatherCondition(temp) {
                if (temp <= 0) return '极寒';
                if (temp <= 10) return '寒冷';
                if (temp <= 25) return '凉爽';
                if (temp <= 35) return '炎热';
                return '酷热';
            }
        }
    });
script>

2.7.3