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

运行效果

相关推荐
泯泷10 分钟前
Tiptap 深度教程(四):终极定制 - 从零创建你的专属扩展
前端·javascript·架构
局i11 分钟前
vue简介
前端·javascript·vue.js
yqcoder34 分钟前
vue2 和 vue3 中,列表中的 key 值作用
前端·javascript·vue.js
U***498335 分钟前
前端TypeScript教程汇总,从基础到高级
前端·javascript·typescript
梵得儿SHI36 分钟前
Vue 指令系统:事件处理与表单绑定全解析,从入门到精通
前端·javascript·vue.js·v-model·v-on·表单数据绑定·表单双向绑定
二川bro38 分钟前
第45节:分布式渲染:Web Workers多线程渲染优化
开发语言·javascript·ecmascript
lcc18739 分钟前
Vue props
前端·vue.js
秋天的一阵风1 小时前
😱一行代码引发的血案:展开运算符(...)竟让图表功能直接崩了!
前端·javascript·vue.js
Hilaku1 小时前
npm scripts的高级玩法:pre、post和--,你真的会用吗?
前端·javascript·vue.js
mCell2 小时前
React 如何处理高频的实时数据?
前端·javascript·react.js