如图:
本来1对多是这样的
然后用分步页签的例子改成 这样
但是改造后发现一个问题,就是填完第1步跳到第2步后,再选上一步,回来再看表单就被清空了。
Q群的群友提示:
发现从分步表复制过来的,那里确实用的是v-if
,然后把v-if 改成v-show以后就可以了。
上网查了一下,网上对v-if和v-show的解释
https://blog.csdn.net/weixin_41646716/article/details/80090484(Vue里面的v-if与v-show)
v-if
根据表达式的值true
或false
在DOM中生成或者移除一个元素(或多个元素)。有点类似JavaScript中的if
条件判断。在Vue中除了v-if
也有v-else-if
和v-else
之类;
v-show
除了v-if
之外,Vue还提供v-show
也可以控制元素的渲染。v-show
和v-if
功能有点相似,其中v-if
依赖于控制DOM节点,而v-show
是依赖于控制DOM节点的display
属性。当v-show
传入的值为true
时,对应DOM元素的display
的值为block
之类的,反之为false
时,display
的值为none
。也就是用户看不到元素的显示,但其DOM元素还是存在的。
注意:v-show 不支持<template>语法,也不支持v-else语法
v-if
和v-show
都能控制DOM元素的显示和隐藏,但是在切换v-if
模块时,Vue有一个局部编译/卸载过程,因为v-if
中的模板可能包括数据绑定或者子组件,v-if
是真是的条件渲染,它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。