ipyvuetify 中的 v-if 实现

问题描述

我对使用 ipyvuetify 还很陌生，我想知道实现条件渲染的最佳方法是什么。当我移动到仪表板上的另一个选项卡时，我希望能够使导航侧边栏中的控件消失。

类似行为的简单实现如下：

import ipyvuetify as v 

button1 = v.Btn(color='red',children = ['Submit 1'],style_ = 'width:30%')
button2 = v.Btn(color='blue',children = ['Submit 2'],style_ = 'width:30%')

def on_click(widget,event,data): 
    button1.disabled = True

button2.on_event('click',on_click)

v.Html(tag='div',class_='d-flex flex-column',children=[button1,button2])

当点击按钮时没有 button1.disabled = True，我想删除/停止一起呈现控件。我认为 v-if 的一些实现是可行的，但我似乎无法弄清楚。

有什么想法吗？

解决方法

您可以更改按钮容器的子项：

import ipyvuetify as v 

button1 = v.Btn(color='red',children = ['Submit 1'],style_ = 'width:30%')
button2 = v.Btn(color='blue',children = ['Submit 2'],style_ = 'width:30%')

def on_click(widget,event,data): 
    if button1 in my_buttons.children:
        my_buttons.children = [button2]
    else:
        my_buttons.children = [button1,button2]

button2.on_event('click',on_click)

my_buttons = v.Html(tag='div',class_='d-flex flex-column',children=[button1,button2])

my_buttons

注意：更改列表或字典时，始终创建一个新实例。未检测到现有实例的突变。

,

在这里回答我自己的问题。想出了一种的方法来做到这一点，但可能有更好的方法。我更新了 button1.style_ 中元素的 css 显示属性。

下面显示了一种打开和关闭按钮的方法。毫无疑问，有更简洁的方法可以做到这一点。

button1 = v.Btn(color='red',data): 
    
    if button1.style_ != 'display:none':
        button1.style_ = 'display:none'
    else: 
        button1.style_ = 'display:block; width:30%'
    

    
        
button2.on_event('click',on_click)

v.Html(tag='div',button2])