//这里直接上代码 

<!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. android 退出系统

    /** * */ package com.szkingdom.android.phone.utils; import java.io.BufferedReader; import java.io.IO ...

  2. Spark技术在京东智能供应链预测的应用——按照业务进行划分，然后利用scikit learn进行单机训练并预测

    3.3 Spark在预测核心层的应用 我们使用Spark SQL和Spark RDD相结合的方式来编写程序,对于一般的数据处理,我们使用Spark的方式与其他无异,但是对于模型训练.预测这些需要调用算 ...

  3. hbase的命令

    1.1. 命令 名称 命令表达式 创建表 create '表名', '列族名1','列族名2','列族名N' 查看所有表 list 描述表 describe  ‘表名’ 判断表存在 exists  ' ...

  4. 基于localStorage的登录注册

    以下代码,如果有地方有错,请直接指出,我会改进的(只改错误,不改逻辑,因为我自己是不会这样写代码的,这个只适合初学者): <!DOCTYPE html> <html> < ...

  5. Servlet学习(一)——Servlet的生命周期、执行过程、配置

    1．什么是Servlet Servlet 运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源.但servlet的实质就是java代码,通过jav ...

  6. 【原创】TimeSten安装与配置

    1.安装TimeSten 2.安装时要指定TNS_ADMIN_LOCATION,即tnsnames.ora的路径,因为tt会根据这个连接Oracle.C:\TimesTen\tt1122_32\net ...

  7. JDOJ 2785: 商之和 数论分块

    Code: #include <iostream> #include <cstdio> #define setIO(s) freopen(s".in",&q ...

  8. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  9. perl脚本去除文件中重复数据

    今天第一天写博客,写的不好请大家多多指教,废话不多说了,干货送上: ############################################################# #!/u ...

  10. [Vijos P2000]A x B Problem

    题目大意:叫你求A × B. 解题思路:高精度.你可千万别小看这道题,这是2017年7月27日的信息. 不过也不要怕,根据twd2的题解里写的,用普通的高精度加上一些小小的修改是可以过的. 那么直接上 ...