怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读

简介: 这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。

1、如何在前端vue中隐藏某一个元素(el-form-item怎样隐藏)

给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏

     <el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="user_id">
        <el-input  v-model="ruleForm.user_id"></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
return {
        //是否展示id
        showEl:false
        }

2、效果

在这里插入图片描述

3、设置form表单为只能读、不能修改

在input标签中使用 readonly='true'

      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"  readonly='true'></el-input>
      </el-form-item>
相关文章
|
2天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
189 62
|
2天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
23 10
|
2天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
181 64
|
2天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件
|
6天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
40 11
|
5天前
|
JavaScript 前端开发 搜索推荐
推荐5款免费、开箱即用的Vue后台管理系统模板
推荐5款免费、开箱即用的Vue后台管理系统模板
|
7天前
|
缓存 JavaScript 前端开发
vue中使用keep-alive的问题
vue中使用keep-alive的问题
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1036 0
|
7天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
14天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子