使用VUE形式输入绑定有条件绑定问题

发布于 2025-02-08 12:17:23 字数 599 浏览 2 评论 0原文

有人可以帮助我弄清楚我们如何根据输入是否没有输入，一个或多个逗号来输出不同绑定的方式为这种绑定添加条件吗？

<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`

逗号：//i.sstatic.net/uhm9e.png“ alt =“在此处输入图像说明”>

原文

Can someone please help me to figure it our how to add a condition to this Binding in a way that output different binding based on if the input has none, one or many Comma in it?

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

so in case that input has no comma the output will be

You Entered `London`

If One Comma

You Entered `London` AND `Paris`

and if many

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夕色琉璃 2025-02-15 12:17:23

也许喜欢以下：

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>

Maybe like following:

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>

回复收藏 0 原文

~没有更多了~