Is there any simpler way to write the following code?

[jealtw]

I have the following code:

with html.Td(v_if="item['ispreopnormal']", classes="text-left", style="color:black;"):
html.Span("{{item['preop']}}")
with html.Td(v_else=True, classes="text-left", style="color:red;"):
html.Span("{{item['preop']}}")

I wonder if there is any simpler way to write it, something like the following:

html.Td("{{item['preop']}}", classes="text-left", style=("{color:'black' if item['ispreopnormal'] else color:'red')}", ))

Of course, the above simpler code is not correct. Can you give any help?

[jourdain]

html.Td(
   "{{ item.preop }}", 
   classes="text-left", 
   style=("{ color : item.ispreopnormal ? 'black' : 'red' }", ),
)

[jourdain]

text in string are actual JavaScript not python. ;-)

[jealtw]

It works, thanks jourdain!
And I also tried the following code :
html.Td("{{ item['preop'] }}", classes="text-left", style=("{ color : item['ispreopnormal'] ? 'black' : 'red' }", ),)
it also works.
Then I have another question : my original data 'item' is a dict object in python, so in my code I use dict style item['preop'], but in your answer, you just write item.preop, what is the conversion rule between javascript and python object, can you explain a bit ?

And I am also a bit confused about '{ }' and '{{ }}', when to use '{ }' and when to use '{{ }}', and even '{{{ }}}', what is the rule?

[jourdain]

• Vue template syntax
• Js object property access

[jourdain]

• Python f-string print(f"{py-var}")
• Static Python string / dynamic js
  • HTML template html.Span("Hello {{ name }}") [Vue templating]
  • Attribute vuetify.VSlider(label=("`Hello ${name}`",), ...) [JS string templating]
• Python f-string with dynamic JS (Need to generate {{ }} but escaping make you create {{{{ }}}}
  • html.Span(f"{py_var} {{{{ state_var }}}}")

[jealtw]

Thanks a lot for your help !