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

已于 2023-06-05 11:40:11 修改
阅读量2.4k 收藏 5
点赞数 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
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
v-model 三元运算符_学习三元运算符-技巧与窍门
Web 开发&软件开发
07-23 8816
学习三元运算符-技巧与窍门 大约六个月前，我开始使用三元运算符逻辑，并且注意到自己一直在使用简写if / else逻辑。 它缩短了我的代码，缩短了编写代码的时间，并使我对胡须看起来更聪明。 多亏了Google Analytics（分析），我发现我从程序员那里获得了许多页面浏览，他们正在寻找有关“ if / else速记”，“三元逻辑”和“速记逻辑php”信息。 我为“？：”菜鸟创建了一...
vue中v-model的值可以写三元判断么？
最新发布
MtangEr的博客
04-18 580
直接在v-model中写三元判断是不对的，可以使用computed计算属性达到效果
v-model的值不能是表达式，的临时解决办法
qq_35694833的博客
05-06 422
【代码】v-model的值不能是表达式，的临时解决办法。
vue中v-model绑定三目运算符报错解决
qq_43532275的博客
07-19 1万+
vue中v-model绑定三目运算符报错解决
报错‘v-model‘不能写表达式以及Computed property “x“ was assigned to but it has no setter
m0_59157023的博客
03-02 575
报错'v-model' directives require the attribute value 以及Computed property "x" was assigned to but it has no setter
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。 二、 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message，表单数据变化data.message也发生变化 然后通过Mustache表达式，将变化之后的message数据显示到视图页面上 三、 效果 四、 深入 v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：
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元素数据双向绑定相关操作技巧,需要的朋友可以参考下
VUE中的三元表达式
代码包工头的博客
04-21 1332
简单的if - else 判断可以使用三元表达式完成 if (判断条件) { callback() } else { callback(new Error(`错误原因`)) } 转换成三元表达式 判断条件 ? callback() : callback(new Error(错误原因`)) 问号后面是成立 冒号后面是不成立 ...
Vue常用指令（v-model，v-once，v-if，v-show）举例
hq.zheng的博客
07-10 1384
举例代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>vue的常用指令&a
vuejs学习笔记 v-model v-on v-bind computed vue三目运算符
热门推荐
qq_25009679的博客
01-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> link rel="stylesheet" href="./css/bootstrap.min.css"> title>Titletitle> head> style> .complete{ color: #00a65a; text-d
解决vue3报 v-model directives require no argument 警告
weixin_56143175的博客
03-12 4583
出现报错 “v-model directives require no argument ” 时候： 在 settings.json 文件中添加 “vetur.validation.template”:false vetur.validation.template”:false 如果并没有起作用，就使用第二种方法 在 .eslintrc.js 文件里面加入 “vue/no-v-model-argument”: “off” "vue/no-v-model-argument": "off" 最后波浪
vue基础总结
qq_36145110的博客
11-06 3084
vue基础总结
v-model的各种使用状态和使用结果
yezi153的博客
08-30 232
使用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、付费专栏及课程。

余额充值