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。

相关推荐
我只会写Bug啊2 小时前
Vue文件预览终极方案:PNG/EXCEL/PDF/DOCX/OFD等10+格式一键渲染,开源即用!
前端·vue.js·pdf·excel·预览
扯蛋4384 小时前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy4 小时前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉4 小时前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码4 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点5 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi5 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽5 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化
rising start5 小时前
四、CSS选择器(续)和三大特性
前端·css
一 乐6 小时前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设