vue中的条件判断
v-if:当网页中根据判断条件进行显示内容时,就可以使用v-if修饰符,在使用v-if时直接加在标签中,并且赋予值或者指定方法或变量

显示if内容

运行结果 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818154907599.png#pic_center)

v-else:
与js等其他语言相似,当判断条件为flase时要显示其他内容,可以使用v-esle修饰符

显示else内容

运行结果: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818154943818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70#pic_center)

v-else-if:
多条件判断,好多语言中多有这种语法,在python中类似于elif,在进行多条件判断时就可以使用,比如对考试成绩进行分类


成绩优秀


成绩良好


成绩中等


成绩及格


成绩不及格



​运行结果:
在这里插入图片描述

但是这里面有一个bug,在分数大于100时,应该提示输入分数有误,这时就需要加入一个分数输出是否有误的语句

请输入正确的分数

运行结果: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818155148474.png#pic_center)

注意:对于多条件判断最好还是写在

在这里插入图片描述

这个案例涉及一个vue的复用问题,当在用户框中输入过程中点击切换为邮箱时,输入的内容会复用,如果不希望内容复用,可以在input中增加一个key<input type=“text” placeholder=“请输入账号”/ id=“userName” key=“userName”>当key值不同时就不会出现复用,当key值相同时就会出现复用v-show:v-show也是判断修饰的对象需不需要显示,表现形式与v-if相似,但是方式不太相同v-if的判断条件为false时,修饰的对象直接在DOM中删除,就不会存在v-show的判断条件为false时,修饰的对象只是为其增加了一个样式display:none;在开发中,如果对于一段内容需要频繁的显示和隐藏时,可以使用v-show,如果只需要隐藏一次时,可以使用v-if。

Logo

前往低代码交流专区

更多推荐