VUE3+TS 页面中写if,写循环

最新推荐文章于 2024-09-18 16:06:11 发布

liberalhumblehopeful

最新推荐文章于 2024-09-18 16:06:11 发布

阅读量1.7k

点赞数 2

文章标签： elementui vue.js typescript

本文链接：https://blog.csdn.net/fhrlhh/article/details/125061051

版权

本文探讨了如何在Vue.js项目中结合使用TypeScript，通过示例展示了v-if、三元运算符和v-for在Ts中的实现方式，强调了类型安全和代码组织的重要性，帮助开发者理解如何提升前端项目的可维护性和效率。

摘要由CSDN通过智能技术生成

{state.remittanceList.length !== 0 && (
  <div>
    <div class={[styles['order-index-body-top-detail'], 'padding-none',        'order-index-body-top-detail-el']}>
      <div class={styles['order-son']}>
           <el-collapse accordion>
               <el-collapse-item
                   v-slots={{
                     title: () => <div class={[styles['title'], 'padding-left-30']}>付汇信息</div>,
                   }}
                >
                  <div class={[styles['importer-info'], 'padding-none']}>
                    <el-row gutter={22}>
                       {state.remittanceList.map((item) => {
                         return (
                           <el-col span={8}>
                             <div class={styles['payment-info-one']}>
                               <div class={styles['payment-info-one- left']}>
                                  {item.handle}
                               </div>
                             </div>
                           </el-col>
                         )
                         })}
                   </el-row>
               </div>
               <div class={styles['middle']}></div>
              </el-collapse-item>
             </el-collapse>
            </div>
          </div>
          <div class={styles['middle']}></div>
      </div>
  )}

页面的单个if,在js中,用v-if,在ts中的写法是 {state.test == 0 && ( )} , ( )中写页面的内容, 要求必须为单个的闭合标签

页面的三元,写法为{state.serviceType === 0 ? <CarTable /> : <ResourcesTable />}

页面的循环,在js中用v-for , 在ts中写法为 state.priceList.map((item, i) => ( )} ,在( )中写内容,必须为单个的闭合标签