javascript - vue v-if v-else bug
PHP中文网
PHP中文网 2017-04-11 12:45:13
[JavaScript讨论组]

vue 使用 v-if="arr.length>0" 配套 v-else 使用, v-ifv-else 同时生效,这算不算是一个 bug 呢?有什么办法可以解决呢?

代码:


var arr = [{title: "xxx", content: "内容"}, {title: "测试", content: "结果"}]


    

{{list.title}}

{{list.content}}

PHP中文网
PHP中文网

认证0级讲师

全部回复(6)
怪我咯

我用的Vue.js 1.0.26版本,确实出现的结果不是期待的那样,v-if和v-else的部分都出现了,但也不完全是那样。我的运行结果是,页面渲染了这样的三行:

xxx
测试
{{list.content}}

前两行是第一个v-for渲染的title,后面一个是v-else元素,但是这个元素没有被编译(compile)。出现了指令未编译的情况,我觉得这算是个bug。

出现这样问题的原因是:

  1. v-for指令优先级比v-if高

  2. v-for是terminal的指令

细看compile过程:

compile第一个v-for元素:

<a v-if="arr.length < 5" href="javascript:void(0);" v-for='list in arr'>

由于v-for优先级比v-if高,所以先compile v-for,把v-if还是当成一个属性(attr)留在元素上。
由于v-for是terminal的指令,中断了这个a元素的子元素的compile,转而compile它的兄弟元素,即:

<a v-else>

而compile时发现这是一个v-else指令,而对这个指令的compile规则是:如果前面的兄弟节点有v-if属性,那么就暂时跳过(skip)这个v-else对应的元素。因为v-else的显示与否是和对应v-if中的表达式的值相关联的。

之后就是实例化之前compile的v-for指令,v-for指令的terminal的,它会单独创建一个fragment,将它的子元素放进去,并从DOM上移除,之后再v-for自己生成的fragment上进行单独的部分compile(partial compile)。这里面才会去compile v-if和下面的{{list.title}}表达式。

问题就出现在这里,因为v-for在link的时候将它的子元素(含有v-if)的元素移除了,而之前v-else的元素又被跳过了,因此最后的结果就是第一个v-for执行了,后面的v-else也在,但是没有被编译执行。

PHP中文网
<p id="app">
  <p v-if="arr.length < 5" href="javascript:void(0);">
    <p class='list'  v-for='list in arr'>
        {{list.title}}
    </p>
  </p>
  
  <p v-else>
      <p v-for='list in arr'>
        {{list.content}}
      </p>
  </p>
</p>

var arr = [{title: "xxx", content: "内容"}, {title: "测试", content: "结果"}];
new Vue({
    el: '#app',
    data: {
        arr : arr
    }
})

这样玩吧 哥们儿

天蓬老师

v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

你代码写成怎样啊,是不是v-if和v-else之间隔着其他元素呢?

迷茫

v-ifv-for 不要同时出现在一个元素上

PHPz
  <p v-if="arr.length>0">
    > 0
  </p>
  <p v-else>
    <= 0
  </p>

题主已经贴了代码,我补充一句:v-for所在的标签是会被算做for循环的一部分的。所以把v-for放到下一层的<p>中就可以了。

迷茫

把2个指令之间的行去掉

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号