//这里直接上代码 

<!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. poj_3468线段树成段更新求区间和

    #include<iostream> #include<string.h> #include<cstdio> long long num[100010]; usin ...

  2. [JZOJ 5912] [NOIP2018模拟10.18] VanUSee 解题报告 （KMP+博弈）

    题目链接: https://jzoj.net/senior/#contest/show/2530/2 题目: 众所周知,cqf童鞋对哲学有着深入的理解和认识,并常常将哲学思想应用在实际生活中,例如锻炼 ...

  3. JavaScript 基础 if switch 弹窗 运算符

    脚本语言最重要的几个部分: 数据类型 运算符 控制语句 数组  方法(函数) 一.基础知识 关键字:系统定义 有意义的名字如 background link 等 标识符:自己定 比如class的名字a ...

  4. activity的23张表

    --二进制数据表 SELECT * FROM act_ge_bytearray; --属性数据表存储整个流程引擎级别的数据,初始化表结构时,会默认插入三条记录, SELECT * FROM act_g ...

  5. SpringCloud学习笔记（4）----Spring Cloud Netflix之Eureka的配置

    1. Eureka监控配置 Eureka的客户端需要加入依赖 <dependency> <groupId>org.springframework.boot</groupI ...

  6. pagination使用说明

    参考自张鑫旭 准备工作 下载jquery.min.js 下载jquery.pagination.js 下载pagination.css 开始敲代码 第一步,引入刚刚下载的三个文件 <link r ...

  7. JDBC读写MySQL的大字段数据

    JDBC读写MySQL的大字段数据   不管你是新手还是老手,大字段数据的操作常常令你感到很头痛.因为大字段有些特殊,不同数据库处理的方式不一样,大字段的操作常常是以流的方式 来处理的.而非一般的字段 ...

  8. Hibernate中如何完成持久化类和数据库映射文件

    因为最近写项目需要要到,就在这里码码字,方便以后做一个参考,在这里,我通过的是myeclipse的反向工程来配置持久化类和数据的映射文件的. 1.打开myeclipse,打开数据库视图,对应的是Win ...

  9. C语言之基本算法38—格式化输出10000以内的全部完数

    //穷举法! /* ================================================================== 题目:求10000以内的全部完数,统计数量并以 ...

  10. unity3d 自己主动文件更新系统

    游戏内容变更之后.一般而言不会想让玩家下载整个游戏包又一次安装,由于这样会流失大量玩家.全部游戏更新是必须的. 更新的内容包含 数据.资源.代码. 基本原理: 1.将须要更新的文件打包成AssetBu ...