m0_56311824
2021-06-28 21:46
采纳率: 100%
浏览 81
已采纳

vue中v-if无法实现问题

想用v-if和v-else让这两个插槽在不同状态的时候显示出来,然而v-if不起作用,两个插槽同时显示(理想效果应该是活跃显示第二个,不活跃显示第一个),

按道理来说,这步之前的步骤应该都是没有问题的 不然插槽应该也加载不出来。而且我设置样式文字字体红色,也没有效果。小白不知道怎么解决了,求大神帮一下忙,因为案例对以后学习还有作用,所以卡了好久了

 

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 风雪一更 2021-06-29 09:12
    已采纳

    直接使用三目运算判断name呗,渲染一个插槽就好了,还v-if写俩,不嫌麻烦吗...

    <slot :name="isActive?'item-icon-active':'item-icon'"></slot>
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 改为v-if ="isActive === false"

    评论
    解决 无用
    打赏 举报
  • 404警告 2021-06-28 21:52

    使用<div v-if>

    <div v-else>

    来操作这两个 把他们放进去 合成只使用一次if else

    评论
    解决 无用
    打赏 举报
  • 崽崽的谷雨 2021-06-29 08:53

    其实你这个是具名插槽,只要控制显示那个name的插槽就行。你这个写法得意思是isActive==false的时候显示item-icon反之显示另一个。

    评论
    解决 无用
    打赏 举报
  • 禅思院 2021-06-29 10:51

    如我你只是实现下面的效果的  没有必要写那样写  感觉看不懂   ,下面是最好的!

    可以给我个采纳吗,谢谢!! 点击我这个回答右上方的【采纳】按钮

    <template>
      <div class="tab-bar-item">
        <div class="{'active':isActive}">
          <slot></slot>
        </div>
      </div>
    </template>
    评论
    解决 无用
    打赏 举报
  • 有问必答小助手 2021-06-29 22:34

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题