首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使按钮在某个点之后更改其步骤而不丢失值?

如何使按钮在某个点之后更改其步骤而不丢失值?
EN

Stack Overflow用户
提问于 2018-11-30 15:32:45
回答 1查看 58关注 0票数 2

我期待创建一个按钮在网页上,将开始有一个步骤"2“后,一定的价值。

我目前使用的JS框架是vue.js,下面是我到目前为止使用的框架:

代码语言:javascript
复制
<input :step="something >= 5 ? 2 : 1" type="number" >

前一步是vue.js中v-bind的缩写.现在我的问题是,一旦我达到了5的值,当我希望用户能够选择4而不必经过3然后4的时候,就会有2的下降率。

或者,我认为我可以生成一个数字数组,但我不知道如何在这个过程中引入一个2的步骤。

比如1,2,3,4,5,7,9,11,13.

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-30 16:30:18

您可以以编程方式完成此操作。

更新为使用手表,并管理‘编辑’模式,因此我们改变价值时,键入。

代码语言:javascript
复制
<template>
  <div id="app">
    <input :step="1" type="number" v-model="something" @keydown="keydown" />
    {{ editing }}
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      something: 0,
      last: 0,
      editing: false
    };
  },
  methods: {
    keydown(e) {
      this.editing = e.key !== "Enter";
      if (!this.editing) {
        this.validateSomething(Number(this.something));
      }
    },
    validateSomething(v) {
      if (v > 5) {
        if (v % 2 === 0) {
          if (v > this.last) {
            this.something = v + 1;
          } else {
            this.something = v - 1;
          }
        }
      }
      this.last = this.something;
    }
  },
  watch: {
    something: function(newVal, oldVal) {
      console.log(newVal, oldVal);
      let v = Number(newVal);
      if (!this.editing) {
        this.validateSomething(v);
      }
    }
  }
};
</script>

下面是一个工作代码框:https://codesandbox.io/s/mm6x3q60px

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53560470

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档