v-model不能使用三元表达式，使用另一种方法平替的双向绑定映射

已于 2023-06-05 11:40:11 修改
阅读量2.5k 收藏 6
点赞数 6
文章标签： vue.js
于 2023-04-12 10:53:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72663698/article/details/130101580
版权

项目中遇到的需求，需要把后台获取的list数组对象展示出来，然后我就用了v-for循环+v-model双向绑定的方法来做展示

但是有一个数据需要做映射才行

 就是上面这个 ftr_16

 我想用三元表达式做映射，但是发现项目报错，网上搜了一下，发现v-model是不支持三元表达式的，然后我就请教了一下技术群的大佬

解决方法：

在data里面写个对象，把值当作key直接取值就行了

 最后完美解决

九龙长廊_富贵呱呱
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Vue入门学习（一）
爱喝水的考拉
12-27 956
文章目录Vue 入门Vue 引包Vue 启动eltemplatedata插值表达式Vue 指令常用的Vue的指令v-bindv-onv-modelv-forthis组件渲染-父使用子组件继承-父子组件传值（父传子）注册全局组件过滤器filter ：全局过滤器，所有组件共享filters： 组件内部过滤器，组件内有效监视改动watchcomputedsoltVue 生命周期 Vue 入门 Vue 框...
v-model 三元运算符_学习三元运算符-技巧与窍门
Web 开发&软件开发
07-23 8829
学习三元运算符-技巧与窍门 大约六个月前，我开始使用三元运算符逻辑，并且注意到自己一直在使用简写if / else逻辑。 它缩短了我的代码，缩短了编写代码的时间，并使我对胡须看起来更聪明。 多亏了Google Analytics（分析），我发现我从程序员那里获得了许多页面浏览，他们正在寻找有关“ if / else速记”，“三元逻辑”和“速记逻辑php”信息。 我为“？：”菜鸟创建了一...
vue中v-model的值可以写三元判断么？
最新发布
MtangEr的博客
04-18 610
直接在v-model中写三元判断是不对的，可以使用computed计算属性达到效果
Vue指令—上篇
qq_42116266的博客
01-02 1890
v-text指令 作用: 类似于innerText. 会替换原来的内容 语法: v-text=“值” 值是一句话表达式(变量,基本运算,三元表达式) <div id="app"> <p v-text='msg'>hello world</p> <p v-text="obj.age+1">哈哈</p> <p v-text="obj.age>=18?'成年了':'未成年'">
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。 二、 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message，表单数据变化data.message也发生变化 然后通过Mustache表达式，将变化之后的message数据显示到视图页面上 三、 效果 四、 深入 v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：
vue基础总结
qq_36145110的博客
11-06 3095
vue基础总结
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
无论是简单的文本输入、复杂的表单控件，还是不同类型的输入事件，`v-model`都能提供便捷的数据双向绑定解决方案，极大地提高了开发效率。通过理解并熟练掌握`v-model`的用法，开发者能够更高效地构建交互丰富的前端...
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
vue自定v-model实现表单数据双向绑定问题
10-18
Vue.js 是一个流行的前端JavaScript框架，其核心特性之一就是数据双向绑定。在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新...
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
在Vue中，`v-model`指令是实现数据双向绑定的关键特性之一，这使得UI（用户界面）与应用程序的状态能够实时同步，极大地简化了表单处理和动态数据更新。 双向绑定意味着当你在视图层（例如输入框、选择框或复选框）...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
‘v-model‘ directives require the attribute value which is valid as LHS vue/valid-v-model
qq_58719130的博客
05-21 4079
'v-model' directives require the attribute value which is valid as LHS vue/valid-v-model
vue中v-model绑定三目运算符报错解决
热门推荐
qq_43532275的博客
07-19 1万+
vue中v-model绑定三目运算符报错解决
vue知识点总结
qq_41161604的博客
03-30 331
vue知识点总结
v-model的各种使用状态和使用结果
yezi153的博客
08-30 242
使用v-model
v-model的值不能是表达式，的临时解决办法
qq_35694833的博客
05-06 425
【代码】v-model的值不能是表达式，的临时解决办法。
v-model绑定三元表达式
09-04
v-model不能直接绑定三元表达式，因为v-model主要用于表单输入与模型数据的双向绑定。然而，你可以在模板中使用三元表达式来动态地设置v-model的绑定值。例如，你可以在一个input元素上使用v-model绑定一个变量，然后通过三元表达式来决定这个变量的值。这样，当条件发生变化时，v-model绑定的变量也会相应地改变。下面是一个示例代码： ``` <input type="text" v-model="age > 18 ? '成年' : '未成年'"> ``` 在上面的代码中，我们使用v-model将input元素与一个变量绑定起来，然后通过三元表达式来动态地设置这个变量的值。当age大于18时，变量的值为'成年'，否则为'未成年'。这样，当用户输入内容时，变量的值也会相应地改变。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue v-model的用法解析](https://download.csdn.net/download/weixin_38502814/14687317)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue基础总结](https://blog.csdn.net/qq_36145110/article/details/127715326)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九龙长廊_富贵呱呱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值