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。

相关推荐
WEI_Gaot2 分钟前
zustand 基础和进阶
前端·react.js
程序员Qian5 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户2031196600966 分钟前
sheet的基本用法
前端
火星思想12 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
杨进军16 分钟前
MutationObserver 实现 iframe 自适应高度
前端
火星思想17 分钟前
Promise 核心知识点(非基础)
前端·javascript·面试
前端大白话17 分钟前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
Paramita18 分钟前
Koa源码解读
前端
用户614722537720318 分钟前
JavaScript 性能优化实战:从理论到落地的全面指南
前端
专业掘金19 分钟前
0426 手打基础丸
前端