首页 > 其他分享 >vue3 jsx响应式渲染变量

vue3 jsx响应式渲染变量

时间:2024-08-31 12:15:24浏览次数:10  
标签:变量 渲染 vue3 申请 订单 支付 开发票 jsx

1、JSX渲染变量

vue在html代码区渲染变量使用双大括号{{ }},jsx在渲染是单大括号{}

另外,这里随便记一下一个简单有点绕的业务逻辑

2、多个变量影响判断三元表达式

根据上图,想要的效果分别是:

  • 订单状态是否支付,显示对应状态
  • 已支付的订单是否申请开发票,显示对应状态;且已申请的无法再申请、未支付的订单无法申请开发票
  • 未支付的订单无法开发票

需要判断的条件为:

  • 订单状态:服务端获取的state 为0是未支付,1是已支付;
  • 开发票按钮:服务端获取的invoicestate为0是未申请,1是已申请;invoicestate为0时同时判断state 是否为0,如果为0则无法申请发票

 

标签:变量,渲染,vue3,申请,订单,支付,开发票,jsx
From: https://www.cnblogs.com/xz1005xfx/p/18390067

相关文章

  • vue3 导出为Excel文件
    服务端给的一个下载接口:/order/exportOrderOpenInvoice导出转化为ExcelconstexportOrder=async()=>{ letreqData={};  letexportOrderOpenInvoiceUrl="/order/exportOrderOpenInvoice";   try{   constresponse=awaitaxios.get(exportOrderOpenInvo......
  • vue3+ts封装一个uniapp的自动滚动列表,实现看板效果
    电视机上要以列表展示数据,并且数据会实时更新,电视机不能点击,所以考虑自动播放的一个效果。展示方案有两种:1、列表上下自动滚动实现轮播效果。(此时具体滚动的高度由用户自己决定,每次滚动几条数据)2、列表以“页”的形式做成轮播图的翻页效果。由于项目的电视机是有任务提示作......
  • vue3下拉菜单点击之后缓慢展开与缓慢关闭
    利用 max-height 来实现下拉菜单的缓慢展开和关闭效果。通过设置一个固定的 max-height 值以及过渡效果,可以让菜单在展开和关闭时产生动画效果。<template><divclass="dropdown"><divclass="selected"@click="toggleDropdown">......
  • Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NET Co
    Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NETCore)https://pan.baidu.com/s/1SBt4RTT_m6uA9pk857KlcQ?pwd=6666https://www.bilibili.com/video/BV16s4y1m7bd/?spm_id_from=333.337.search-card.all.click&vd_source=e6b56a12a1d9ef11f6c13......
  • 渲染加速新选择:GPU云渲染平台的全方位评估
    在当今快速发展的数字时代,视觉内容的创造和呈现已成为各行各业的共同需求。无论是电影制作、游戏开发还是建筑设计,高质量的视觉输出都是不可或缺的。GPU云渲染平台以其强大的计算能力和灵活性,为这些行业提供了一种全新的解决方案。GPU云渲染平台概述基本概念:GPU云渲染平台是一......
  • 自定义深度渲染实现物体描边
    自定义深度渲染实现物体描边SceneTexture首先我们要先了解清楚关于深度渲染的几个属性的含义SceneTexture(场景纹理)节点:通过这个节点,输入UV值,你可以获取到这个UV对应的像素点的各个属性,比如SceneColor(场景颜色),SceneDepth(场景深度),CustomDepth(自定义深度),Opacity(不透明度)等......
  • 技术分享:jsx语法和应用
    首先问问大家对JSX了解多少,可以提几个问题,引发大家的思考和求知欲。然后开始讲 JSX是React架构里的东西,但是不局限于React,它是一种JavaScript的语法扩展,完全是JavaScript内部实现的,所以vue里面也能用。 JSX的优点:JSX执行更快,因为它在编译为JavaScript代码后进行了优化它是......
  • 在Vue3中实现文件上传功能,结合后端API
    随着现代Web应用程序的不断发展,文件上传成为了用户交互中不可或缺的一部分。在本篇博客中,我们将深入讨论如何在Vue3中实现一个文件上传功能,并与后端API进行交互。我们将使用Vue3的CompositionAPI(setup语法糖)来构建我们的示例。##1.了解需求在实现文件上传之前,我们需要明确......
  • 实现一个动态评论系统:Vue3与后端API交互
    在当今的开发环境中,评论系统是多种应用中不可或缺的一部分,本文将带您深入了解如何使用Vue3实现一个动态评论系统,并与后端API进行交互。我们将重点使用Vue3的compositionAPI(setup语法糖)来构建这个系统。需求概述在构建动态评论系统时,我们需要实现以下功能:获取评论......
  • vue3-pinia保持数据时效性,不会因为刷新浏览器丢失实时数据(pinia-plugin-persistedstat
    1.方法一(pinia-plugin-persistedstate)1.安装插件-pinia-plugin-persistedstateyarnaddpinia-plugin-persistedstatenpmipinia-plugin-persistedstate2.在pinia中注册import{createPinia}from'pinia';importpiniaPluginPersistedstatefrom'pinia-pl......