vue 如何动态的给子组件设置不同的指令?-灵析社区

编程界菜niao

比如我创建了几个指令 v-number,v-text 来限制输入不同的文本 此时我遍历生成子组件的时候,要根据不同的type来配置不一样的指令,这个需求要如何实现? 如果我的指令还包含参数,比如可以通过下面不同的字段 `v-input:number`、`v-input:text` 在指令内部进行处理 但是主要问题还是在于动态渲染组件的时候如何动态配置不同的指令,以及指令不同的传参?

阅读量:255

点赞量:15

问AI
Vue.directive('input', { bind(el, binding) { if (binding.arg === 'number') { // 数字输入处理 el.addEventListener('input', function(e) { e.target.value = e.target.value.replace(/[^0-9]/g, ''); }); } else if (binding.arg === 'text') { // 文本输入处理 } } }); 组件里: export default { data() { return { items: [ { id: 1, type: 'number', directive: { arg: 'number', value: '' } }, { id: 2, type: 'text', directive: { arg: 'text', value: '' } } ] }; } };