VUE 自定义指令的一种应用场景

在写这篇技术文章的时候，我也在想如何能够写好，这篇文章，让看到的小伙伴有能够很好的收获，下面我就把解决问题的场景叙述下希望看到的小伙伴能有更好的印象加深。

首先解决此问题方案有几种：
方案一： 直接在代码中增加onkeyup 事件，但是有一点，苹果浏览器，手机端不支持

onkeyup="value=value.replace('/[^\d]/g','')"

方案二： 直接在代码里面通过VUE的input属性来定义方法，再方法中再进行上文信息修改，可以实现

<input @input="positiveIntegers($event)"/>
    <script>
        methods:{
            positiveIntegers($event){
                $event.target.value = $event.target.value.replace('/[^\d]/g','');
            }
        }
    </script>

一、应用场景
    ![1.jpg][1]
    
解决此奖品数量的需求，要求只能输入正整数，且编辑的时候还要对数据进行双向绑定。

JAVASCRIPT 模块代码

上面HEML 模块的input 框中，做了以下几点：
1.  :value 来做默认数据绑定，再编辑的时候进行数据绑定
2.  v-positive-integers //此位置为自定义指令，在底部 directives，内部定义了 指令 positiveIntegers，因此再页面中可以用 v-positive-integers 或者 v-positiveIntegers 都是允许的，驼峰式名命会被采用 - 来解析，但是JS中指令名称，一定不能有 - 。
3. 变相实现双向绑定。 在指令是有一些属性的，
    详情移步到，VUE官网，https://cn.vuejs.org/v2/guide/custom-directive.html
   这里主要看的就是虚拟节点，次节点的 context 可以指向上文属性，从而实现双向绑定。
   这里有一篇很不错的代码讲解：  https://segmentfault.com/a/1190000008291645

以上为对此小功能点的剖析和多种解决方案的筛选，做此分享，希望小伙伴能拓展些思路。

[1]: http://blogimg.bravedu.com/2018/08/371232046.jpg

BraveDu

VUE 自定义指令的一种应用场景

您可以选择一种方式赞助本站

发表评论