vue中的条件判断

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

显示if内容

运行结果 

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

显示else内容

运行结果： 

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

成绩优秀

成绩良好

成绩中等

成绩及格

成绩不及格

​运行结果：

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

请输入正确的分数

运行结果： 

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

这个案例涉及一个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。