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

运行效果

相关推荐
3Katrina30 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper30 分钟前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor42 分钟前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
陈cCCc1 小时前
记录第一次npm发包!!!
vue.js·npm
轻语呢喃1 小时前
js事件机制:监听、捕获、冒泡与委托
javascript
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端极客探险家1 小时前
Spring Boot + Vue.js 全栈开发:从前后端分离到高效部署,打造你的MVP利器!
vue.js·spring boot·后端
独立开阀者_FwtCoder2 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛2 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts