vue中的条件判断
vue中的条件判断v-if:当网页中根据判断条件进行显示内容时,就可以使用v-if修饰符,在使用v-if时直接加在标签中,并且赋予值或者指定方法或变量显示if内容运行结果![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818154907599.png#pic_center)v-else:与js等其他语言相似,当判断条件为flase时要显示其他内容,可以使
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。
更多推荐
所有评论(0)