Question

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

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

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

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

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

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

如果没有，那么有没有人有过制作自己的修饰符的经验？

Answer 1

不幸的是，您似乎暂时无法进行自定义修饰符，因此对功能here有所需求。 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>

Vue.js-表单输入修饰符

1 个答案: