Vue3 + Ts 学习笔记第一天

此文章是观看 @小满zs 总结的一章笔记
一、ref 和 reactive
ref.value = 新数组 可以直接进行赋值
reactive.push(…新数组) 才可以进行赋值
除非 reactive<泛型定义>({ 泛型对象: [] }) 之后才可以直接进行赋值
不过看视频小满讲的源码是 ref 如果定义复杂类型还会走到 reactive

<template>
  <div>{{obj.list}}div>
  <div>{{arr}}div>
  <div>{{str}}div>
template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 泛型
type O = {
  list: Number[]; // 意思数字数组类型
};
const obj = reactive<O>({
  list: [],
});
const str = reactive<number[]>([]);
const arr = ref<number[]>([]);
setTimeout(() => {
  let data = [1, 2, 3, 4];
  str.push(...data);
  obj.list = data;
  arr.value = data;
}, 1000);
script>

二、动态class 配合计算属性 案例
:class=“[‘静态class’, 动态class]”
// 动态class 三元表达式
:class=“[ isImage ? ‘静态class1’ : ‘静态class2’ ]”

 <template>
  <view v-for="(item, index) in 4" :key="index">
    <view :class="['tabs_bottom', getBottom(index)]">石上优view>
  view>
template>
<script setup lang="ts">
import { computed } from "vue"

const getBottom = computed((newVal) => {
  return (index: number): string => {
    switch (index) {
      case 1:
        return 'tabs_bottom_1'
      case 2:
        return 'tabs_bottom_2'
      case 3:
        return 'tabs_bottom_3'
      default:
        return ''
    }
  }
})
script>
<style lang="less">
.tabs_bottom {
  color: #F18F2D;
}

.tabs_bottom_1 {
  color: #5B6FE5;
}

.tabs_bottom_2 {
  color: #C86558;
}

.tabs_bottom_1 {
  color: #4877DD;
}
style>

三、动态style
1.第一种情况

  
  <view :style="[{background: `url(${item.images}) no-repeat`}, 
  {backgroundSize:'cover'}]">view>

2.第二种情况

  <view :style="[{'background':'#d64d3b' ,'height':'20rpx', 
   'width': systemInfoList[3].value + '%','border-radius': '12rpx'}]">
  view>

3.第三种情况

<template>
 <view :style="{color: background}">121view>
template>
<script lang="ts" setup>
 import { ref } from "vue"
 const background = ref<string>("purple")
script>