Vue3+TS+Vant3——增删改input和通过双页面进行增删改操作

最新推荐文章于 2024-04-02 04:07:33 发布
最新推荐文章于 2024-04-02 04:07:33 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： TS Vue3 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/128478262
版权
Vue3 同时被 2 个专栏收录
43 篇文章 8 订阅
订阅专栏
TS
21 篇文章 2 订阅
订阅专栏

Vue3+TS+Vant3——增删改input和通过双页面进行增删改操作

两种方案：

  1. 第一种点击添加按钮添加一项，缺点：页面过于臃肿，用户体验较差
    请添加图片描述

  2. 第二种：分成两种页面进行添加等操作
    请添加图片描述

先说一下第一种，我这里用到了vant3Ui组件库
直接上代码：

<!-- aaa -->
<template>
  <van-sticky>
    <header-slot>
      <template #denglu>
        <van-nav-bar title="aaa" left-arrow @click-left="()=>{router.back();}">
        </van-nav-bar>
      </template>
    </header-slot>
  </van-sticky>

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <div v-for="(item,index) in formData.arr" :key="index" class="box1">
        <div class="borders"></div>
        <van-button type="danger" v-if="index!=0" size="mini" class="delete" @click="deleteRow(index)">删除</van-button>
        <div class="">
          <van-field v-model="item.aaa" :name="'aaa'+index" placeholder="aaa" />
          <van-field v-model="item.bbb" :name="'bbb'+index" placeholder="bbb" />
          <van-field v-model="item.ccc" :name="'ccc'+index" placeholder="ccc" />
        </div>
      </div>
      <div class="borders"></div>
      <van-button type="primary" size="small" class="button" @click="butclick2">添加一项</van-button>

    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" native-type="submit" color="#FCD39F" :loading="status.submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>
  
  <script lang='ts' setup>
import { ref, onMounted, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { Notify, Toast, Button } from 'vant';

const defaultData = {
  arr: [
    {
      appellation: "",
      getName: "",
      workplace: "",
      office_code: "",
    },
  ],
  count: 0,
};

const butclick = () => {
  let obj={
    appellation: "",
      getName: "",
      workplace: "",
      office_code: "",
  }
  formData.value.arr.push(obj);
  /* 方法二 */
/*   let arrs: any = [];
  arrs.push({
    appellation: "",
    getName: "",
    workplace: "",
    office_code: "",
  });
  formData.value.arr.push(arrs);
  console.log(formData.value);
  
  formData.value.count++;
  console.log(formData.value.count); */
};
/* 删除 */
const deleteRow = (index: any) => {
  console.log(index);
  formData.value.arr.splice(index, 1);
};

const onConfirm = (value: any) => {
  formData.value.highest = value;
  showPicker.value = false;
};

const formData = ref<typeof defaultData>(Object.assign({}, defaultData));

const status = reactive({
  loading: true,
  submit: false,
});

onMounted(() => {
  let sub: any = window.localStorage.getItem("onSubmit");
if (sub !== null) {
 console.log( formData.value.explain=JSON.parse(sub).explain);
 console.log( formData.value.arr=JSON.parse(sub).arr);
}
});
const onSubmit = (values: any) => {
  console.log("submit", values = formData.value);
  window.localStorage.setItem("onSubmit", JSON.stringify(values));
};

const router = useRouter();
</script>
<style scoped lang='less'>
</style>

新增节点

const butclick = () => {
  let obj={
    appellation: "",
      getName: "",
      workplace: "",
      office_code: "",
  }
  formData.value.arr.push(obj);
  /* 方法二 */
/*   let arrs: any = [];
  arrs.push({
    appellation: "",
    getName: "",
    workplace: "",
    office_code: "",
  });
  formData.value.arr.push(arrs);
  console.log(formData.value);
  
  formData.value.count++;
  console.log(formData.value.count); */
};

其中obj里的对象名称要跟reactive中创建这个的数组里的名称一样
请添加图片描述
请添加图片描述

Vue3是通过v-model生成新的节点，无需用克隆节点生成新的Dom
这里因为不需要进入页面，所以直接引入接口就可以了，无需写编辑事件

删除：获取对应选中的div盒子，之后对盒子进行删除操作

const deleteRow = (index: any) => {
  console.log(index);
  formData.value.arr.splice(index, 1);
};

第二种方法

<!-- 教育背景 -->
<template>
  <van-sticky>
    <header-slot>
      <template #denglu>
        <van-nav-bar title="教育背景" left-arrow @click-left="()=>{router.back();}">
        </van-nav-bar>
      </template>
    </header-slot>
  </van-sticky>

  <van-form @submit="onSubmit" input-align="right">
    <van-cell-group inset>
      <h1>教育背景(高中起填)</h1>
      <van-cell-group>
        <div v-if="jiaoyu instanceof Array || formData.educational.length ==0">
          <van-cell value="尚未填写" />

        </div>
        <div v-if="jiaoyu.educational">
          <!-- formData.educational -->
          <div v-for="(item,index) in  jiaoyu.educational" :key="index">
            <van-swipe-cell>
              <van-cell :title="item.school" @click="editoriaClick(index)" is-link :value="item.time" :label="item.major" />
              <template #right>
                <van-button square type="danger" text="删除" @click="delectClick(index)" />
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </van-cell-group>
      <!-- <van-divider  :style="{ color: '#B0A8B9', borderColor: '#B0A8B9'}"/> -->
      <van-button type="primary" size="small" class="button" @click="btbclickAdd()">{{jiaoyu instanceof Array?'点我进行添加':'添加'}}</van-button>
      <van-divider :style="{ color: '#B0A8B9', borderColor: '#B0A8B9'}" />
      <!-- 最高学历绩点 -->
      <van-field v-model="formData.harp" name="harp" label="最高学历绩点" placeholder="最高学历绩点" />
      <!-- 成绩排名 -->
      <van-field v-model="formData.classRank" is-link readonly name="classRank" label="成绩排名" placeholder="点击选择成绩排名" @click="status.showPicker3 = true;" />
      <van-popup v-model:show="status.showPicker3" position="bottom">
        <van-picker :columns="columns3" @confirm="onConfirm4" @cancel="status.showPicker3 = false" />
      </van-popup>
      <!-- 证明人/联系方式 -->
      <van-field v-model="formData.references" name="references" label="证明人/联系方式" placeholder="证明人/联系方式" />

      <!-- 次高学历绩点 -->
      <van-divider :style="{ color: '#B0A8B9', borderColor: '#B0A8B9'}" />
      <!-- 次高学历绩点 -->
      <van-field v-model="formData.mostHarp" name="mostHarp" label="次高学历绩点" placeholder="次高学历绩点" />
      <!-- 成绩排名 -->
      <van-field v-model="formData.mostClassRank" is-link readonly name="mostClassRank" label="成绩排名" placeholder="点击选择成绩排名" @click="status.showPicker4 = true;" />
      <van-popup v-model:show="status.showPicker4" position="bottom">
        <van-picker :columns="columns4" @confirm="onConfirm5" @cancel="status.showPicker4 = false" />
      </van-popup>
      <!-- 证明人/联系方式 -->
      <van-field v-model="formData.mostReferences" name="mostReferences" label="证明人/联系方式" placeholder="证明人/联系方式" />
    </van-cell-group>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" color="#FCD39F" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
  
  <script lang='ts' setup>
import { ref, onMounted, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { Notify, Toast } from "vant";
import { type } from "os";
import path from "path/posix";
const defaultData = {
  educational: [],
  // 最高学历绩点
  harp: "",
  // 最高成绩排名
  classRank: "",
  // 最高证明人/联系方式
  references: "",
  // 次高学历绩点
  mostHarp: "",
  // 次高成绩排名
  mostClassRank: "",
  // 次高证明人/联系方式
  mostReferences: "",
};
const currIndex = ref("0");
const num = ref(0);
const num2 = ref(0);
const num3 = ref(0);
const columns = ["高中", "大专", "本科", "硕士", "博士"];
const columns2 = ["全日制", "非全日制"];
const columns3 = ["前10%", "前30%", "平均水平", "平均水平以下"];
const columns4 = ["前10%", "前30%", "平均水平", "平均水平以下"];

const formData = ref<typeof defaultData>(Object.assign({}, defaultData));

const status = reactive({
  loading: true,
  submit: false,
  showCalendar: false,
  showPicker: false,
  showPicker2: false,
  showPicker3: false,
  showPicker4: false,
});

/* 自定义区间 */

/* 成绩排名 */
const onConfirm4 = (value: any) => {
  formData.value.classRank = value;
  status.showPicker3 = false;
};
const onConfirm5 = (value: any) => {
  formData.value.mostClassRank = value;
  status.showPicker4 = false;
};
const propertiesClick = (index: any) => {
  status.showPicker2 = true;
  num3.value = index;
};
if (window.localStorage.getItem("jiaoyubeijing") != null) {
}
// @ts-ignore
let jiaoyu: any =
  // @ts-ignore
  JSON.parse(window.localStorage.getItem("jiaoyubeijing")) || [];

onMounted(() => {
  console.log("jiaoyu", jiaoyu);

  if (jiaoyu instanceof Array) {
    console.log("我现在是个数组");
    console.log(jiaoyu instanceof Array);

    jiaoyu = formData.value;
    window.localStorage.setItem("jiaoyubeijing", JSON.stringify(jiaoyu));
  } else {
    formData.value = jiaoyu;
    console.log(formData.value);
  }

  /*   let tem = formData.value as any;
      for (let i in formData.value) {
        if (res.data[i]) {
          tem[i] = res.data[i];
        }
      }
      formData.value = tem; */
});
// 编辑
const editoriaClick = (index: any) => {
  // console.log( jiaoyu.educational[index]);
  window.localStorage.setItem(
    "indexValue",
    JSON.stringify(jiaoyu.educational[index])
  );
  router.push({
    path: "/index/Education/Educational",
    query: { str: "编辑", index: index },
  });
};
/* 删除 */
const delectClick = (index: any) => {
  // jiaoyu.educational.splice(index, 1);
  console.log(index);
  console.log(formData.value.educational.splice(index, 1));
  window.localStorage.setItem("jiaoyubeijing", JSON.stringify(jiaoyu));
  console.log(formData.value);
};
/* 添加 */
const btbclickAdd = () => {
  router.push({ path: "/index/Education/Educational", query: { str: "添加" } });
};
const deleteRow = (index: any) => {
  formData.value.educational.splice(index, 1);
};
const onSubmit = (values: any) => {
  values = formData.value;
  console.log(values);
  window.localStorage.setItem("jiaoyubeijing", JSON.stringify(values));
};
const router = useRouter();
</script>

<style scoped lang='less'>
.box1 {
  position: relative;
}
:deep(.van-nav-bar) {
  background-color: #fef0e3;
}
.submit :deep(.van-button__text) {
  color: #7c4e36;
}
.button {
  display: block;
  // text-align: center;
  // line-height: 26px;
  background: #f60;
  border: #f60;
  color: #fff;
  margin: 10px auto;
  cursor: pointer;
  font-size: 12px;
  border-radius: 13px;
}
h1 {
  font-size: 16px;
  padding: 10px;
}
.borders {
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
  background: #000;
  margin-top: -1px;
}
.delete {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
</style>

下面是详情页

<template>
  <van-sticky>
    <header-slot>
      <template #denglu>
        <van-nav-bar title="教育背景详情" left-arrow @click-left='()=>{router.back();}'></van-nav-bar>
      </template>
    </header-slot>
  </van-sticky>
  <van-form @submit="onSubmit" input-align="right">
    <van-cell-group inset>
      <van-divider :style="{  borderColor: '#B0A8B9'}" content-position="left">教育背景(高中起填)</van-divider>

      <div class="box1" v-for="(item,index) in formData.educational" :key="index">
        <!-- 时间 -->
        <van-field v-model="item.time" is-link readonly name="time" label="时间" placeholder="点击选择日期" @click="times(index)" />
        <van-calendar color="#1989fa" v-model:show="status.showCalendar" type="range" @confirm="onConfirm" />
        <!-- 学历 -->
        <van-field v-model="item.education" is-link readonly name="education" label="学历" placeholder="点击选择学历" @click="educationClick(index)" />
        <van-popup v-model:show="status.showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm2" :default-index="0" @cancel="status.showPicker = false" />
        </van-popup>
        <!-- 教学性质 -->
        <van-field v-model="item.properties" is-link readonly name="properties" label="教育性质" placeholder="点击选择教育性质" @click="propertiesClick(index)" />
        <van-popup v-model:show="status.showPicker2" position="bottom">
          <van-picker :columns="columns2" @confirm="onConfirm3" :default-index="0" @cancel="status.showPicker2 = false" />
        </van-popup>
        <!-- 导师 -->
        <van-field v-model="item.tutor" name="tutor" label="导师" placeholder="导师" />
        <!-- 学校 -->
        <van-field v-model="item.school" name="school" label="学校" placeholder="学校" />
        <!-- 专业 -->
        <van-field v-model="item.major" name="major" label="专业" placeholder="专业" />
      </div>
    </van-cell-group>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" color="#FCD39F" native-type="submit">
        {{route.query.str == '编辑'?'编辑':"保存"}}
      </van-button>
    </div>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" color="#EC002B" @click="delectClick">
        清空所有内容
      </van-button>
    </div>
  </van-form>
</template>

<script lang='ts' setup>
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Notify, Toast } from "vant";

const defaultData = {
  educational: [
    {
      // 时间
      time: "",
      // 学历
      education: "",
      // 教学性质
      properties: "",
      // 导师
      tutor: "",
      // 学校
      school: "",
      // 专业
      major: "",
    },
  ],
  // 最高学历绩点
  harp: "",
  // 最高成绩排名
  classRank: "",
  // 最高证明人/联系方式
  references: "",
  // 次高学历绩点
  mostHarp: "",
  // 次高成绩排名
  mostClassRank: "",
  // 次高证明人/联系方式
  mostReferences: "",
};
const formData = ref<typeof defaultData>(Object.assign({}, defaultData));
const columns = ["高中", "大专", "本科", "硕士", "博士"];
const columns2 = ["全日制", "非全日制"];
const status = reactive({
  loading: true,
  submit: false,
  showCalendar: false,
  showPicker: false,
  showPicker2: false,
  showPicker3: false,
  showPicker4: false,
});
const num = ref(0);
const num2 = ref(0);
const num3 = ref(0);
/* 自定义区间 */
const formatDate = (date: any) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
/* 调用方法 */
const onConfirm = (date: any) => {
  const [start, end] = date;
  status.showCalendar = false;
  formData.value.educational[num.value].time = `${formatDate(
    start
  )} - ${formatDate(end)}`;
  console.log(date);
};
/* 时间 */
const times = (index: any) => {
  status.showCalendar = true;
  console.log(index);
  num.value = index;
};
/* 学历 */
const onConfirm2 = (value: any) => {
  formData.value.educational[num2.value].education = value;
  status.showPicker = false;
};
/* 学历 */
const educationClick = (index: any) => {
  status.showPicker = true;
  console.log(index);
  num2.value = index;
};
/* 教学性质 */
const onConfirm3 = (value: any) => {
  formData.value.educational[num3.value].properties = value;
  status.showPicker2 = false;
};

const propertiesClick = (index: any) => {
  status.showPicker2 = true;
  num3.value = index;
};
/* const btbclickAdd = () => {
  let obj = {
    time: "",
    education: "",
    properties: "",
    tutor: "",
    school: "",
    major: "",
  };
  formData.value.educational.push(obj);

  console.log(formData.value.educational);
}; */
let jybg: any = window.localStorage.getItem("JYBG");
let jiaoyubeijing: any = window.localStorage.getItem("jiaoyubeijing");
jybg = JSON.parse(jybg);
jiaoyubeijing = JSON.parse(jiaoyubeijing);
onMounted(() => {
  console.log();
  if (route.query.str == "编辑") {
    let indexValue = window.localStorage.getItem("indexValue") || [];
    console.log(indexValue);
    if (indexValue instanceof Array) {
      return;
    } else {
      formData.value.educational[0] = JSON.parse(indexValue);
    }
  } else {
  }
});
/* 删除 */
const delectClick = () => {
  let tem = formData.value.educational[0] as any;
  for (let i in formData.value.educational[0]) {
    tem[i] = "";
  }
  formData.value.educational[0] = tem;
};
/* 提交 */
const onSubmit = (values: any) => {
  console.log(values);
  if (route.query.str == "编辑") {
    Toast("编辑成功！");

    router.back();
    //  => item.id === obj.id ? obj : item

    jiaoyubeijing.educational[Number(route.query.index)] = values;
    window.localStorage.setItem("jiaoyubeijing", JSON.stringify(jiaoyubeijing));
    window.localStorage.removeItem("indexValue");
  } else {
    Toast("添加成功！");
    router.back();
    window.localStorage.removeItem("indexValue");
    if (window.localStorage.getItem("indexValue") == null) {
      if (jiaoyubeijing == null) {
        jiaoyubeijing = {};
      }
      jiaoyubeijing.educational.push(values);
      console.log(jiaoyubeijing);

      window.localStorage.setItem(
        "jiaoyubeijing",
        JSON.stringify(jiaoyubeijing)
      );
      window.localStorage.setItem("JYBG", JSON.stringify(values));
    }
  }

  //   router.back();
};

const router = useRouter();
const route = useRoute();
</script>
<style scoped lang='less'>
h1 {
  font-size: 18px;
  padding: 10px;
}
</style>

这个是把数据存到本地上了，真实项目需要通过接口去传递数据，原理是一样的

Southern Wind
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue开发实战十一:Vue3+TS+Antd实现vben项目的增删改查
博主逸尘
12-03 3251
文章目录1.效果图预览2.列表的实现3.数据新增、修改及附件上传的实现4.详情界面的实现 说明：之前用Vue2+ElementUI|iView用的那是相当的爽，写法和之前做移动的用的Ionic很是类似，最近新开了一个项目，用的Vue3+TS+Antd那真是一把辛酸一把泪，完全摸索+找规律+瞎蒙，开发了一个模块之后终于有所得，以此篇文章记录。 1.效果图预览 老规矩先上效果图 列表 新增 附件上传 修改 详情 2.列表的实现 index.vue页面中 template布局如下，BasicTable列
vue3+ts实现表格的增删改查（一）
温暖前端的博客
02-16 1641
通过点击"Add Item"按钮，可以显示添加数据的表单。通过点击"Edit"按钮，可以显示编辑数据的表单，并将编辑的数据填充到输入框中。通过点击"Delete"按钮，可以删除对应的数据。等方法来处理表单的提交、编辑、更新和删除操作。方法中，将正在编辑的数据的索引赋值给。属性赋予一个新的值，并将其添加到。变量，并将对应的数据填充到。数组中删除对应的数据。
利用vue3+ts实现管理后台（增删改查）
01-18
简单的管理后台基本上就是数据的增删改查。主要就是 列表 + form 表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体 API 及参数。 以前 vue2 的时候最简单的做法是写出来一个页面的逻辑，然后直接 copy 到各个页面中，修改 API 及参数即可。高级一点的是利用 mixin 函数，将可复用逻辑抽离，每个页面引入 mixin。 vue3 之后新增了composition API。本文就是利用composition API，将可复用的逻辑抽离到composition API中，并引入ts，实现一个简单的管理后台功能。 利用@vue/cli创建项目 首先需要将 @v
vue 实现点击“增加“”按钮，开发前端学习
最新发布
m0_54926105的博客
04-02 269
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue3+TS+pinia+解构分层 实现 渲染增删改查
2201_75522570的博客
05-16 855
【代码】vue3+TS+pinia+解构分层 实现 渲染增删改查。
vue3.2+ts+json-server【语法糖版】实现用户信息增删改查crud
はんみん的博客
09-25 505
【代码】vue3.2+ts+json-server【语法糖版】实现用户信息增删改查crud。
vue3 form表单新增，表单修改，删除，表单数据回显
qq_42704945的博客
07-27 6620
vue3封装弹窗组件，数据回显，封装组件的流程，第一理解具体的业务需求。想好数据的交互层级，数据进数据出的具体逻辑。vue的组件封装记住一点不要在子组件修改父组件的数据，需要修改数据emit方法抛出数据父组件修改。。
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip
11-19
课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+...
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue 3.0 运行到浏览器后会同时加载出两个新页面
yy_nf666的博客
01-11 737
问题: 在vue.vuefig.js中,devServer:{open: true},会自动打开两个页面 解决: 首先操作vue.vuefig.js中,devServer:{open: false},然后设置package.json文件,如下图: 最后需要重新运行.
vue3 增删改查
ZDM_9999的博客
12-29 608
【代码】vue3 增删改查。
vue3 todolist 增删改查
weixin_45567934的博客
07-11 210
span @click=“visibilitry=‘completed’” :class=“{editStyle:visibilitry==‘completed’}”>未完成{{completedSize.length}}已完成{{activeSize.length}}清除已完成。
vue3 element-plus 增加、编辑封装复用
weixin_44832362的博客
12-17 1541
vue3 element-plus 增加、编辑封装复用
基于cordic ip核实现arctan
qq_42014414的博客
09-19 5168
基于cordic ip核实现arctan@TOC 基于cordic ip核实现arctan 最近在研究相位补偿电路，需要用到反正切函数求解相位差，因此学习了该ip核的使用，写一篇小记录，希望能帮到有需要的盆友。 IP核介绍 简单粗暴地介绍一下IP核的使用。 首先将functional selection选为arc tan，随后设置输入位宽和输出位宽。 需要注意的是，输入数据默认格式为“有2bit整数位的有符号定点小数”，输出数据默认格式为“有3bit整数位的有符号定点小数”，依据需要制定位宽即可。
vue3 简单的添删修查 (ref)
m0_71835253的博客
06-29 720
vue 3 简单的添删修查
vue3的页面切换动画 vue3！vue3！vue3！
晓枫
06-25 1773
重点： vue2的进入/离开 直接-enter就好了，vue3的需要 -enter-from 其他的都一样； html代码 <router-view class="router-view" v-slot="{ Component }"> <transition :name="transitionName" mode="out-in"> <keep-alive> <component :is="Component" /&g
vue3+vite+ts+vant
10-14
回答：在使用vue3+vite+ts进行开发时，可以通过以下步骤引入vant组件库： 1. 安装vant组件库：`npm install vant -S` 2. 在main.ts中引入vant组件库： ```typescript import { createApp } from 'vue'; import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值