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

运行效果

相关推荐
Hello--_--World1 小时前
Vue:虚拟Dom
前端·javascript·vue.js
bluetata2 小时前
AI 浪潮与破局:TypeScript 生态实战,让 AI 为你所用
javascript·人工智能·typescript
布局呆星2 小时前
Vue Router 核心知识点梳理
前端·javascript·vue.js
JiaWen技术圈2 小时前
增量静态再生(ISR)详解:Next.js 中的实现与应用
javascript·git·ubuntu
张元清2 小时前
React 中的语音与摄像头输入:语音识别、媒体设备与权限
前端·javascript·面试
01漫游者2 小时前
JavaScript继承深度解析
开发语言·javascript·ecmascript
卤蛋fg63 小时前
vue甘特图vxe-gantt如何实现拖拽任务条时如有已关联依赖线,同时更新依赖任务的日期的方式
vue.js
前端那点事3 小时前
Vite4.x+打包优化实战指南(无冗余):从体积到速度,一文吃透所有技巧
前端·vue.js
费曼学习法3 小时前
Vue 响应式系统源码级剖析:从 Object.defineProperty 到 Proxy
javascript·vue.js
前端那点事3 小时前
Vue十万条数据渲染无卡顿!3种工业级方案(附可复制代码+避坑指南)
前端·vue.js