layui 和 vue的监听select的option值的变化来改变input的属性

最新推荐文章于 2023-09-25 09:40:56 发布
原创 最新推荐文章于 2023-09-25 09:40:56 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用layui和vue的场景，通过监听select的选择项变化，动态调整input字段的属性。当nature_sort选中67时，input_b变为可编辑并设置placeholder为'品牌名'；选中63时，input_b变为只读并显示'原厂全新件'；其他情况，input_b保持只读状态，placeholder设为'品牌名'。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

mounted:function () {
                var that=this;
                this.$nextTick(function () {
                    layList.form.render();
                    layList.select('nature_sort',function (data) {
                        that.productInfo.nature_sort=data.value;
                        console.log(data.value);
                           input_b = $("input[name='brand']");
                        if(data.value == 67) {
                &nb

最低0.47元/天 解锁文章

200万优质内容无限畅学
在 Vue 3 中，封装 `＜el-select＞ `组件，实现字典（枚举）选择框，自定义事件监听、支持动态设置option数据源、 placeholder和style
专注于计算机研发知识和资讯分享
03-03 843
清空选择框时，选择框传递null ,更有利于Java服务端的枚举类型映射，符号接口签名的计算。需求： 简化选择框代码、统一处理接口的字段传值问题。如果传递“”，则容易导致前后端签名计算不一致。
layui嵌入select表单元素选择并回显
进步的记录
10-17 1894
因为项目基于layui库，并且需要在表格里面嵌入select表单元素，选择改变数据之后需要提交改变后的数据，所以记录一下实现的方法。 以下是实现的一个小测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...
监听输入框的变化
weixin_38728273的博客
05-08 1091
//监听输入框 $('#anaything').on('input propertychange',function () { //执行重载 table.reload('supplierChooseReload', { page: { curr: 1 //重新从第 1 页开始 }, ...
jquery监听input值变化_layui 监听提交，发异步，把数据提交给php示例
weixin_39621870的博客
11-28 1478
layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form ,layer = layui.layer; //监听提交 form.on('submit(add)', function(data){ console.log(data); var username,password,email,phone...
input 内容变化监听
时光有伱，记忆成花~
07-21 2558
//常规监听 $("#searchInput").bind('input porpertychange',function(e){ //获取input输入的值 console.log(e.delegateTarget.value); alert(e.delegateTarget.value); }); //layui 监听input内容变化 $("#searchInput").on("input",function(e){ //获取.
vuejs绑定数据到select中，选择option数据后，同步改变下面一个输入框input的值
热门推荐
qq_21036015的博客
04-28 4万+
前言：应公司开发，某小功能的需要，所以初次接触到vuejs，摸索学习中，还不熟练，只是简单分享一些公司开发中遇到的一些问题，有不足的地方欢迎留言讨论。   一，问题描述： 【当前页面里有一个select框 + 一个input框】 1.ajax请求后台数据，绑定到select下拉单选框中。 2.点击下拉框，选中一栏数据，同时input从没有值变成同步更新到选中的那一栏值。 3.演示效果图
Layui-Select + Vue的一次踩坑
Crack-Maker的博客
04-21 839
缘起 因为项目用到了LayUI，项目又极其需要Vue的双向绑定功能，故糅合了这两种不同思维的框架，极其不建议这样使用。遇到的困难是：LayUI的Select无法绑定Vue的v-model。分了几步解决这个问题。 解决 原代码 <div class="layui-form-item"> <label class="layui-form-label">行业分类:</label> <div class="layui-input-block"> &lt
Vue: 多个el-select不能重复选择相同属性
02-22
当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时，这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突，即用户不能在多个select中选择相同的值。以下是对这个问题的...
Vue.js初学—简易计算器（监听input的输入值变化事件，从而实现结果的动态刷新）
Dove的博客
10-15 986
<divid="app"> <inputtype="text"v-model="num1"@keyup="sum()"> <selectv-model="selected"name=""@click="sum()"> <optionvalue="+">+</option> <optionvalue="-">-</option&...
layui 使用jquery 实现点击input动态改变一个元素
weixin_42490383的博客
06-19 1269
< layui-form-item> < input filter=“hobby”> < select name=“gender” id=“gender”> < option id=“gentleman” value=“01”>先生< /option> < option id=“lady” value=“02”>女士< /option> < /select> </> //部分代码 form.on(‘s
layui触发vue中值改变（select、radio、checkbox）
facker_CN的博客
06-19 2045
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
vue监听select的变化
zongzi494的博客
12-29 2027
vue 无法监听动态新增的属性的变化, 你需要用 $set 来为这些属性赋值. <el-select :value="form[item.valueName]" @change="$set(form, item.valueName, $event)"> <el-form-item label="问题类型" prop="problemType"> <el-select v-model="formInfo4.problemType" placeholder
layui input 监听事件
u013733643的博客
09-25 5408
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回。console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象。
layui-form表单中的select Vue使用@change监听无效
K982869292的博客
11-15 2280
标题 layui-form表单中的select标签 Vue使用@change监听无效 在layui中，使用form表单，需在form中添加class=“layui-form”，form属性才会生效，但是在我配合使用Vue监听改变事件时，@change监听会失效，以下是解决办法： 1.删除form中的class="layui-form"就可以监听到了[狗头]； 2.在select中添加lay-filter=“checkType”，在layui.use使用form.on进行监听，再调用Vue中的方法就可以了。
vue监听input搜索框是否有输入数据，如果有显示搜索的数据，如果没有则显示全部数据
m0_51354601的博客
04-14 2836
在Vue中可以使用计算属性（computed）来实现监听搜索框输入数据的功能。这样就可以实现搜索框输入数据时显示搜索的数据，没有输入数据则显示全部数据的功能。方法过滤出符合条件的数据；如果没有输入数据，则返回全部数据。会根据搜索框的输入数据来过滤数据。如果搜索框有输入数据，则使用Array的。
Jq jsp layui 使用 select option input[checkbox] 赋值后没有变化
weixin_43896125的博客
02-17 432
jsp项目 layui
layui 选择下拉框时,另外的input组件变化
baoyc
06-12 1087
layui 选择下拉框时,另外的input组件变化 下面这个div 绑定一个 lay-filter <div class="layui-form-item"> <label class="layui-form-label">是否外地流入:</label> <div class="layui-input-inline"> <select name="iswd" id="iswd" lay-v
layui的select和穿梭框联动
走向CTO的路上...
06-25 969
在事件处理程序中，您可以获取用户选择的选项的值，然后使用 Ajax 请求从服务器获取相应的数据，然后使用 layui 的。这样，当用户选择 Select 框中的选项时，穿梭框的左侧列表将根据选择的选项重新渲染，同时右侧列表的已选城市将被保留。要实现左边的 Select 和右边的穿梭框的联动，您可以使用 JavaScript 和 layui 库。我们还为穿梭框右侧列表的选择事件绑定了一个事件处理程序，以记录用户已选择的城市。方法渲染了一个穿梭框，其中左侧列表的数据是从服务器获取的城市列表。
实时监控input的值
Feast_aw的博客
01-05 2842
$("#user_text").bind("input propertychange change", function(event) {});
vue select选中的值和input输入的值，变成一个字段传递到后端
最新发布
03-28
嗯，用户的问题是关于如何在Vue中将select选中的值和input输入的值合并成一个字段传递到后端。我需要先理解用户的具体需求，然后逐步分析解决方案。 首先，用户可能在使用Vue框架开发前端，遇到了表单处理的问题。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值