当前位置：首页 > news >正文

v-if

news 2026/5/12 2:38:00

v-else和v-else-if

1.作用：辅助v-if进行判断渲染

2.语法：

v-else：

v-else

后面不需要加任何语句

v-else-if：

v-else-if="表达式"

注意事项：

1.v-if是如果的意思

条件为：true会渲染

条件为：false不渲染

2.v-else是v-if的否则

不能加任何语句

只能在v-if或v-else-if后面立刻使用（中间不能插入任何东西

）同时v-else不能单独使用

代码案例展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><p v-if="gender ===1">性别♂男</p><p v-else>性别♀女</p><hr><p v-if = 'shuzi>=90'>成绩评定A：奖励电脑一台</p><p v-else-if="shuzi>=80">成绩评定：B奖励周末郊游</p><p v-else-if=" shuzi>=60">成绩评定：C奖励零食礼包</p><p v-else>成绩评定：D惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 引入核心包以后，在全局环境中就有了Vue构造函数// 3.创建实例const app = new Vue({//这里通过el配置标签 el: '#app',//通过data提        供数据来渲染标签data: {gender: 2,shuzi:90}})</script>
</body></html>

v-if