//这里直接上代码 

<!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. 使用Powershell 的获取别的机器WMI类失败解决方法！

    有些时候须要连接多台机器去获取他们的类,可是有些时候我们发现计算机无法连接,这个时候怎么办呢? 请改动组策略中下面配置: 能够使用Gpmc.msc 进行以后.本地计算机策略--计算机配置--管理模板- ...

  2. cocos2d-x_AnchorPoint锚点

    锚点是定位和变换操作的一个重点.锚点我们能够看成用一根图钉将一张纸或者相片钉在墙上的那个点. 节点的位置是由我们设置的position和anchor point一起决定的. 值得一提的是,anchor ...

  3. ES设置查询的相似度算法

    similarity Elasticsearch allows you to configure a scoring algorithm or similarity per field. The si ...

  4. web.xml配置详解（转载）

    一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></di ...

  5. Creating a Custom Page Layout in SharePoint 2013

    Creating a Custom Page Layout in SharePoint 2013 In my last article, I documented how to create a Ma ...

  6. Oracle查询当前用户下的所有表及sqlplus 设置 列宽

    如果oracle服务器中装有多个数据库实例,则在用户名处输入:用户名/密码@数据库名称.如果数据库服务器不在本机上,还需要加上数据库服务器的地址:用户名/密码@IP地址/数据库名称. [oracle@ ...

  7. easyui的datagrid右侧没有边框线

    做项目时,用的easyui的框架的datagrid,运行时发现右侧没有边框,其它的都有边框,使用网页的审查元素可以看到datagrid样式里的宽度没有自动减去2个像素,这些都是easyui自算的宽高, ...

  8. Matlab从入门到精通 Chapter5 数据可视化--

    5-1 图形绘制示例 >> x2=-17:0.02:3; >> y2=1./((x2+3).^2+1)+1./((x2+9).^2+4)+5; >> subplot ...

  9. IPv6理论知识详解

    1. IPv6地址表示 IPv6地址可以表示为128位由0.1组成的字符串,为了便于计算机理解,将128位的二进制字符串表示为32位的十六进制字符串,为了便于理解,人们将其划分为8组,组与组之间用 : ...

  10. [agc004d]salvage robot

    题意: 别问我谁翻译的 虫合虫莫国的领土我们可以抽象为H*W的笼子,在这虫合土上,有若干个机器人和一个出口,其余都是空地,每次虫合虫莫会要求让所有的机器人向某个方向移动一步,当机器人移动到出口时会被虫 ...