v-if和v-else或v-else-if之间不能添加其他元素。
以下是错误事例
1 | < span v-if = "type==1" >错误示范</ span > |
以下是正确实例
1 | < span v-if = "type==1" >正确示范</ span > |
v-if 为同一类型组件(或同一模板的dom树)来做显示和隐藏时,最好在最外层添加key属性来设定唯一标识,否则容易出问题
1 | < template v-if = "type=== 'username'" > |
3 | < input placeholder = "输入用户名" > |
7 | < input placeholder = "输入邮箱" > |
以上代码切换时,仅仅切换placeholder,而不会重新渲染,因为他用了相同的模板
若v-if切换的是逻辑复杂的控件时,切换时不重新渲染极易出问题
需要给要重新渲染的控件添加一个key属性,来唯一标识该控件,被key标识后会重新渲染。实例如下
1 | < template v-if = "type=== 'username'" key = "1" > |
3 | < input placeholder = "输入用户名" > |
5 | < template v-else key = "2" > |
7 | < input placeholder = "输入邮箱" > |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!