vue中的tab切换（v-show,v-if）

今天在用vue写tab切换的时候遇到了一个小坑，就是：不同的选项对应的列表的渲染我用的是v-show进行判断，结果发现虽然选项见得列表切换成功了但是列表的渲染样式却出现了一场异常，

小鬼web

8556人浏览 · 2017-04-18 18:22:51

小鬼web · 2017-04-18 18:22:51 发布

今天在用vue写tab切换的时候遇到了一个小坑，就是：不同的选项对应的列表的渲染我用的是v-show进行判断，结果发现虽然选项列表切换成功了但是列表的渲染样式却出现了异常，经过查阅资料我发现问题就出在了v-show上面。

v-show不管元素是否符合判断条件都会一直存在Dom中，对于不符合条件的元素只是隐藏了。而使用v-if，如果元素不符合条件则不会出现在Dom中。

我将v-show换成v-if之后解决了问题。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^