Question

我有一个带字符串的输入框。当字符串的长度达到一定数量时，我可以执行一种方法（在vue.js中）吗？

类似

<input v-if="inputBox.length == 6 THEN runme()"...>

Answer 1

您可以使用watch选项，您将能够对数据更改做出反应：

new Vue({
  el: '#root',
  data: {
    message: '',
    inputLength : undefined
  },
  methods : {
    doSomething(){
      console.log('I did it !')
    }
  },
  watch :{
    message : function(val) {
      if(val.length>=5){
      this.inputLength = val.length
      this.doSomething(); 
      }
    }
  }
})

.container {
  padding-top: 2em;
}

.intro {
  font-size: 1.5em;
  margin-bottom: 1.5em;
}

.input-value {
  margin-top: 1em;
  font-size: 1.25em;
}

.highlight {
  color: #00d1b2;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
  <h1 class="intro">Binding with Vue</h1>
  <div id='root' class="box">
    <label class="label">Enter text here</label>
    <input class="input is-medium" type='text' id='input' v-model='message'>
    <p class="input-value">The value of the input is: <span class="highlight">{{ inputLength }}</span></p>
  </div>
</div>

在此示例中，如果输入长度> = 5，则它将更改数据中的inputLenght值并执行方法。

有关此的更多信息，请参见： https://vuejs.org/v2/guide/computed.html#Watchers

Answer 2

当字符串超过长度时，您可以使用观察程序来触发方法：

AuthDBEntities db = New AuthDBEntities()
tblReferenceNumber LRefNum = db.tblReferenceNumber.OrderByDescending(ab => ab.ID).First();
string lrNum = LRefNum.ReferenceNumber;

new Vue({
  data () {
    return {
      model: ''
    }
  },
  watch: {
    model: {
      handler: function (value) {
        if (value.length >= 6) {
          this.trigger()
        }
      }
    }
  },
  el: '#app',
  methods: {
    trigger () {
      alert('hi there')
    }
  },
  template: `<input v-model="model">` 
})

输入框达到一定长度时，我可以执行一种方法吗？

2 个答案: