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];
};

运行效果

相关推荐
Mr_Mao17 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
qwfy18 小时前
我要用 AI-native 架构,从零重建一套制造业 ERP/MES
vue.js·spring boot·架构
默_笙18 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
dsyyyyy110119 小时前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
瞬时出道20 小时前
AI 回答为什么能一个字一个字蹦出来?前端搞懂 SSE 这一篇就够了
vue.js
u01110267521 小时前
Vue 3 实现图片裁剪框:拖动、缩放与固定宽高比
前端·javascript·vue.js
小小善后师21 小时前
用 Canvas + AI 实现登录页的 Logo 粒子动画
前端·vue.js
0nirvana01 天前
从普通 script 到 ESM:一文搞懂 JavaScript 模块、IIFE 和 window
javascript
wshzd1 天前
LLM之Agent(104)|DeepSeek-Harness(十三)ReactLoopAgent 总览:kick → turn → step
开发语言·前端·javascript
web打印社区1 天前
远程打印:WebSocket 与 HTTP 轮询怎么选
前端·vue.js·websocket·网络协议·http·electron·pdf