//这里直接上代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <link rel="stylesheet" href="vlib/css/index.css">
    <style>
        *{margin:;padding:;box-sizing:border-box;}
        a{text-decoration:none;}
    </style>
</head>
<body>
    <script src="vlib/vue.js"></script>
    <script src="vlib/index.js"></script>
    <div id="app">

        <component-child :mess="'测试数据123'"></component-child>
    </div>
    <script>
        Vue.directive('limitStr',function(el,bind,vcode){
            var changeInput = function(){
                var name = bind.value && bind.value.name;
                var len = bind.value && bind.value.len;

                if(el.value.trim().length > len){
                     el.value = el.value.slice(,len);
                }
            }

            el.addEventListener('input',changeInput)
        })

        var componentChild = {
            template:'<div>{{messval}}<input type="text" :value="messval" @input="getVal" v-limit-str="{len:10}"></div>',
            data: function(){
              return {
                  messval:this.mess
              }
            },
            props:{
              mess:{
                  type:String,
                  default:'abc'
              }
            },
            methods:{
                getVal:function(e){
                    this.messval = e.target.value
                }
            },
            watch:{
                messval:function(){
                    ){
                       ,);
                    }
                }
            }
        }

        new Vue({
            el:'#app',
            components:{
                componentChild:componentChild
            }
        })
    </script>
</body>
</html>

vue子组件使用指令 同时绑定v-model 指令没有作用的更多相关文章

  1. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  2. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  3. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  4. vue子组件通知父组件使用方法

    vue子组件通知父组件使用方法 <template> <mt-field placeholder="验证码" v-model="getverifycod ...

  5. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  6. Vue子组件与父组件之间的通信

    1.环境搭建 下载 vue-cli:npm install -g vue-cli 初始化项目:vue init webpack vue-demo 进入vue-demo文件夹:cd vue-demo 下 ...

  7. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  8. vue 子组件和父组件

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.添加子组件 1.父组件修改 <template> <!-- v-for 表情表示循环输出数据 ...

  9. vue 子组件把数据传递给父组件

    <div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...

  10. vue子组件如何向父组件传值

    子组件: <template> <div class="app"> <input @click="sendMsg" type=&q ...

随机推荐

  1. C++ 虚函数的缺省參数问题

    前些日子,有个同学问我一个关于虚函数的缺省參数问题.他是从某个论坛上看到的.可是自己没想通.便来找我. 如今分享一下这个问题.先看一小段代码: #include <iostream> us ...

  2. vim编辑器常用语法

    1)yy (功能描述:复制光标当前一行) y数字y (功能描述:复制一段(从第几行到第几行))2)p (功能描述:箭头移动到目的行粘贴)3)u (功能描述:撤销上一步)4)dd (功能描述:删除光标当 ...

  3. javaBean 练习—封装学生信息

    编写一个封装学生信息的JavaBean对象,在页面中调用该对象,并将学生信息输出在页面中. package com.sp.test; public class Student { private St ...

  4. 【算法】Dijkstra算法（单源最短路径问题）（路径还原） 邻接矩阵和邻接表实现

    Dijkstra算法可使用的前提:不存在负圈. 负圈:负圈又称负环,就是说一个全部由负权的边组成的环,这样的话不存在最短路,因为每在环中转一圈路径总长就会边小. 算法描述: 1.找到最短距离已确定的顶 ...

  5. JavaScript学习——使用JS实现首页轮播图效果

    1.相关技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 只能写一次并且放到body标签中 定时操作:setInterval(“changeImg ...

  6. hiho1116 - 数据结构 线段树(区间合并)

    题目链接 现在有一个有n个元素的数组a1, a2, ..., an. 记f(i, j) = ai * ai+1 * ... * aj. 初始时,a1 = a2 = ... = an = 0,每次我会修 ...

  7. Swift 闭包中 self？ 的由来

    class UIViewSpringAnimator: SwipeAnimator { // 动画完成的闭包 var completion:((Bool) ->Void)? func addCo ...

  8. KVO VS isa : KVO 建立在 KVC 之上

    Key-Value Observing (KVO) 建立在 KVC 之上,它通过重写 KVC 和监听 setter 方法,向外发送通知. https://blog.csdn.net/y55091811 ...

  9. 简洁的MVC思想框架——Nancy（Session的使用）

    前文提到关于Nancy中GET和POST以及外部引用图片,css和JS的文件等操作.今天所讲的是Nancy关于Session相关操作. Session作为web开发中极其重要的一部分,而Nancy中S ...

  10. The Node.js Event Loop, Timers, and process.nextTick() Node.js事件循环，定时器和process.nextTick()

    个人翻译 原文:https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ The Node.js Event Loop, Ti ...