javascript - vue.js:如何对对象的每个值进行 v 建模

Question

我想要这样的效果:当我在 <input> 中输入内容时，vue 可以帮助我格式化字符串。

例如:当有人输入 20160324... 时，这可以同时格式化为“2016-03-24...”(因此此效果必须在同一个 <input> 中显示)，因为我的预期是“2016-03-24 15:00:00”。

ps:

1. 我的<input>是由对象数组动态生成的。我想知道在每个项目上编写“v-model”的正确方法是什么。
2. 因为我不知道指定的<input>是什么，所以无法通过“Vue.$watch”观看。

我的数据如下:

data{
        form:[
            {name:'name',value:'',inputType:'text'},
            {name:'sex',value:'',inputType:'radio'},
            {name:'age',value:'20',inputType:'text'},
            {name:'time',value:'',inputType:'date'},
        ]
}

谢谢

Answer 1

第一个动态生成的表单你可以在这里看到https://jsfiddle.net/2q3Lt1vr/ .

[type=date] 输入呈现为 html5 日期选择器。因此，第二个示例我将把 date 更改为 text。你可以在这里看到https://jsfiddle.net/dgq01f6u/2/ 。格式化方法取决于你自己的逻辑。此演示需要您在完成输入后分散注意力。

如果您想实时更新输入字段，您可能需要使用watch，例如

watch: {
  form: {
   deep: true,
   handler: function() {
     this.form.forEach(function(field) {
       if (field.inputType === 'date') {
         // do your format  
       }
     });
   }
  }
}