vue3常用模版语法、api指令（ts）

• vue3基础指令演示

<template>
  <!-- 直接使用 信息内容 -->
  <div>{{ message }}</div>

  <!-- 基础运算 2 -->
  <div>{{ ++number }}</div>

  <!-- 基础运算 3 -->
  <div>{{ number + 1 }}</div>

  <!-- 三元表达式 1 -->
  <div>{{ active ? 1 : 0 }}</div>

  <!-- api调用 [ { "num": 1 }, { "num": 2 }, { "num": 3 } ] -->
  <div>{{ arrNum.map((v) => ({ num: v })) }}</div>

  <!-- v-text 信息内容 -->
  <div v-text="message"></div>

  <!-- v-html 标题 -->
  <div v-html="spanMsg"></div>

  <!-- v-show -->
  <div v-show="active">v-show</div>

  <!-- v-if -->
  <div v-if="number">v-if</div>
  <!-- v-else -->
  <div v-else>v-else</div>

  <!-- v-bing -->
  <div v-bind:class="event">v-bing</div>
  <!-- v-bing多种用法 -->
  <div :class="['calssName1', 'calssName2', event, active ? 'true' : 'false']">
    v-bing
  </div>

  <!-- v-for 用来遍历元素 key必填项（和diff算法有关、提升性能、减少bug） -->
  <!-- v-memo 可配合v-for使用 性能优化会有缓存 -->
  <div v-for="(data, index) in arrNum" :key="index" v-memo="[index === 1]">
    {{ index }}:{{ data }}
  </div>

  <!-- v-once 只渲染一次message（作性能优化用） -->
  <div v-once>{{ message }}</div>

  <!-- 事件绑定、动态事件名称 -->
  <div @[event]="buttom(event)">buttom</div>
</template>

<script setup lang="ts">
const message: string = '信息内容';

const spanMsg: string = '<h1 style="color:red" >标题</h1>';

const number: number = 1;

const active: boolean = true;

// ts定义arr为数字数组
const arrNum: number[] = [1, 2, 3];

// 定义动态点击事件
const event: string = 'click';

// 方法
const buttom = (data: string) => {
  console.log(data);
};
</script>

<style scoped></style>