vue中v-model的值可以写三元判断么?

项目中 偶尔会遇到想给v-model的值 是个动态绑定不同的值

那么我们会发现当直接在v-model中写三元判断是不对的,不能直接使用三元判断。

所以,该怎么处理呢?

你可以使用计算属性或方法来达到类似的效果。

cpp 复制代码
<template>
  <input v-model="computedValue" />
</template>
 
<script>
export default {
  data() {
    return {
      condition: true, // 这里是你的条件
      value1: 'name',
      value2: 'pw',
    };
  },
  computed: {
    computedValue() {
      return this.condition ? this.value1 : this.value2;
    },
  },
};
</script>

如果你需要双向绑定,你可以使用 set 函数来更新条件:

cpp 复制代码
computed: {
  computedValue: {
    get() {
      return this.condition ? this.value1 : this.value2;
    },
    set(value) {
      this.condition = value === this.value1;
    },
  },
},

这样,当输入框的值改变时,computedValue 的 set 函数会被调用,并更新 condition。

相关推荐
tech_zjf11 分钟前
当 AI 把 Next.js Route 越写越快:我为什么做了 next-route-kit
前端·后端
常宇佳15 分钟前
vue3 @代指src路径设置
前端·typescript·vue
砚凝霜31 分钟前
软考网络工程师|案例分析:Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结
前端·css·网络
二级小助手42 分钟前
二级Web前端选择题高频真题20道与考场避坑笔记
javascript·css3·html5·web前端·计算机二级·二级web·web真题
珐恩AI-人工智能1 小时前
大模型意图召回偏差分析:GEO如何解决“有收录却不触发问答曝光”的难题
大数据·前端·人工智能·html·流量运营·geo优化
程序员老赵1 小时前
Docker 部署禅道 ZenTao:轻松搭建研发项目管理平台
前端·后端·github
前端小卡拉1 小时前
用了大半年 AI 编程工具,我才搞懂 Skill 到底是什么
前端·javascript
hunterandroid1 小时前
[鸿蒙从零到一] HarmonyOS 单元测试与 UI 自动化测试实战:从代码质量到用户体验的全链路保障
前端
郭邯1 小时前
用 Intl.DateTimeFormat 手写一个时区转换器,顺便聊聊我和 AI 结对编程的日常
前端·javascript
阿奇__1 小时前
微前端、iframe与Auth Code技术方案对比
前端