vue3中,element-plus中el-input的v-model和value的用法示例

el-input的v-model,邦定响应式变量

html 复制代码
        <el-col :span="6">
          <el-form-item label="检验类别" prop="verifyType">
            <el-input v-model="applyAllInfo.applyBasicInfo.verifyTypeName" readonly />
          </el-form-item>
        </el-col

el-input的value,邦定函数返回值,实现复杂业务处理

html 复制代码
        <el-col :span="6">
          <el-form-item label="评价类型">
            <el-input :value="getTypeValue(applyAllInfo.applyBasicInfo.wspjType)" readonly />
          </el-form-item>
        </el-col>
TypeScript 复制代码
// 获取类型值
const getTypeValue = (key: number) => {
  // 建立类型与值之间的映射关系
  const keyValueMap: Record<number, string> = {
    0: "不评价",
    1: "卫生评价",
    2: "检验结论",
    3: "卫生评价+检验结论"
  };
  return keyValueMap[key];
};

运行效果

相关推荐
xiaotao13110 小时前
Vite 与 Webpack 开发/打包时环境变量对比
前端·vue.js·webpack
web_小码农10 小时前
CSS 3D动画 旋转木马示例(带弧度支持手动拖动)
javascript·css·3d
Armouy10 小时前
Electron:核心概念、性能优化与兼容问题
前端·javascript·electron
F2E_Zhangmo10 小时前
react native如何发送蓝牙命令
javascript·react native·react.js
博主花神10 小时前
【TypeScript】梳理
javascript·ubuntu·typescript
淡笑沐白10 小时前
ECharts入门指南:数据可视化实战
前端·javascript·echarts
非科班Java出身GISer10 小时前
ArcGIS JS 基础教程(1):地图初始化(含AMD/ESM两种引入方式)
javascript·arcgis·arcgis js·arcgis js 初始化·arcgis js 地图初始化
前端摸鱼匠11 小时前
Vue 3 的defineProps编译器宏:详解<script setup>中defineProps的使用
前端·javascript·vue.js·前端框架·ecmascript
天外天-亮11 小时前
Vue2.0 + jsmind:开发思维导图
javascript·vue.js·jsmind
蜡台11 小时前
JavaScript async和awiat 使用
开发语言·前端·javascript·async·await