1

Vue.js 生态系统带有一些方便的修饰符，可用于表单输入。

<input v-model.lazy="msg">

<input v-model.trim="msg">

<input v-model.number="msg">

我想知道是否可以链接这样的修饰符，也许是这样的：

<input v-model.lazy.trim="msg">

如果没有，有没有人有制作自己的修改器的经验？

4

1 回答 1

2

不幸的是，您现在似乎无法制作自定义修饰符，这里有一些对该功能的渴望。您最好的选择 IMO 是制作一个自定义组件，然后根据您的需要发出修改后的值。

我制作了一个快速应用程序（包括在下面）来测试链接修饰符，它确实有效。

new Vue({
   el: '#app',
   data: {
      message: 'Hello Vue.js!',
   },
   computed: {
      len: function() {
         return this.message.length;
      }
   }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model.lazy.trim="message" />
  <span style="background:yellow">{{ message }}</span>
  <span>{{len}}</span>
</div>

于 2020-02-18T09:51:44.263 回答