代码之家 › 专栏 › 技术社区 › Suffii

Vue表单输入绑定的条件绑定存在问题

vue.js

Suffii · 技术社区 · 2 年前

有人能帮我弄清楚我们如何在这个绑定中添加一个条件,根据输入中是否没有、有一个或多个逗号来输出不同的绑定吗?

<p>{{ target}}</p>
<input v-model="target" placeholder="Enter Your Target" />

因此,如果输入没有逗号,则输出将为

You Entered `London`

如果一个逗号

You Entered `London` AND `Paris`

如果很多

You Entered `London` AND `Paris` AND `Rome`

1 回复 | 直到 2 年前

Nikola Pavicevic 2 年前

可能如下所示:

new Vue({
  el: '#demo',
  data() {
    return {
      target: '',
    }
  },
  computed: {
    result() {
      return this.target && '`' + this.target.replaceAll(",", "` AND `") + '`'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>You Entered {{ result }}</p>
  <input v-model="target" placeholder="Enter Your Target" />
</div>

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前