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。

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js