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。

相关推荐
Electrolux13 小时前
基于WASM的纯前端Office解决方案:在线编辑/导入导出/权限切换(已开源)
前端
摇滚侠13 小时前
Vue 项目实战《尚医通》,完成取消预约业务,笔记49
vue.js·笔记
Swift社区13 小时前
用 Chrome DevTools 深度分析 Vue WebGL 内存泄漏(进阶篇)
vue.js·webgl·chrome devtools
合作小小程序员小小店13 小时前
web网页开发,在线%医院诊断管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·jdk·html·intellij-idea
软件技术NINI13 小时前
html css js网页制作成品——html+css+js5 页 jk制服附源码
javascript·css·html
爱学习的程序媛14 小时前
【Web前端】Vue2与Vue3核心概览与优化对比
前端·javascript·vue.js·typescript
li@h14 小时前
如何在电脑端访问小程序时在胶囊添加一个全屏和缩放功能
前端
aiguangyuan15 小时前
React 18 源码解读(一)
javascript·react·前端开发
LFly_ice15 小时前
学习React-23-React-router
前端·学习·react.js
haofafa15 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化