vue的render中如何实现v-show

用template中写完, 通过isShow可以实现动画, 但是为什么我用render实现的就不好使了呢?
请问我的render的问题在哪里?

切换有动画

  <transition name="fadeUp">
      <span v-show="isShow" class="atom-popper">
          <slot>{{content}}</slot>
      </span>
  </transition>

切换无动画

   render(h) {
        return h(
            'transition',
            {
                attrs: { name: 'fadeUp' }
            }, [
                h(
                    'span',
                    {
                        class: ['atom-popper'],
                        style: { display: this.isShow ? undefined : 'none' }
                    },
                    [this.content || this.$slots.default]
                )
            ]
        );
    },
阅读 8k
3 个回答
style: { display: this.isShow ? 'inline' : 'none' }

不是让他 在样式上切换 display none block.
据我推想:
v-show 不是简简单单给 虚拟dom 加上 style display none 或 block, 里面八成 有个钩子 通知 tran 这个组件。 son 要 显示 隐藏, farther 你有何动作。

应该使用directives选项

directives:[ {
  name: 'show',
  value: this.isShow
}]
([vue的文档][1])
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题