Vite + Vue3 + TS 第四章模板语法和指令

最新推荐文章于 2024-02-27 22:42:33 发布

小燧

最新推荐文章于 2024-02-27 22:42:33 发布

阅读量262

点赞数

文章标签： vscode 前端 javascript

本文链接：https://blog.csdn.net/qq_25853769/article/details/125908694

版权

本文展示了在Vue组件中如何解析变量，如`msgs`中存储的'guardian2022'，以及使用三元运算符根据变量`msg`的值决定显示'INo1'或'INo2'。此外，还演示了如何处理字符串数组，将逗号分隔的数值转换为带人民币符号的数组。这些例子深入浅出地解释了前端开发中的基本操作。

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

No.1 解析变量名msgs里面的内容:guardian2022

<script setup lang="ts">
const msgs:string='guaridna2022'
</script>

<template>
  <div>
    {{msgs}}
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
</style>

打印： guardian2022

No.2 三元运算表达式：

<script setup lang="ts">
  const msg:number = 1 
</script>

<template>
  {{msg ? 'I No1' : 'I No2'}}
</template>

<style scoped>
</style>

打印：I No1

<script setup lang="ts">
  const msg:number = 0 
</script>

<template>
  {{msg ? 'I No1' : 'I No2'}}
</template>

<style scoped>
</style>

打印：I No2

No3.调用API的json类型

<script setup lang="ts">
const message:string = "100,200,300,400,500,600"
</script>

<template>
  {{ message.split(',').map(v=> `￥${v}`)  }}
</template>

<style scoped>
</style>