//这里直接上代码 

<!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. java-集合类（二）

    使用场景 1.多线程 (1)在jdk1.5之前原始的集合类中,仅仅有vector.stack.hashtable.enumeration等是线程安全的,其它的都是非线程安全的. 非线程安全的集合在多线 ...

  2. nyoj--18--The Triangle(dp水题)

    The Triangle 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 (Figure 1) Figure ...

  3. Sobel算子及C++实现

    Sobel 算子是一个离散的一阶微分算子,用来计算图像灰度函数的近似梯度. 在空间域上Sobel算子很容易实现,执行速度快,对部分噪声具有平滑作用,还能够提供较为精确的边缘方向信息,缺点是边缘定位精度 ...

  4. javascript系列-class10.DOM（下）

    1.node节点(更详细的获取(设置)页面中所有的内容)         根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:   元素是节点的别称,节点包含元素当然节点还有 ...

  5. Ubuntu16.04+OpenCV3.2.0+Opencv_Contrib3.2.0安装

    为了学习slam,在ubuntu16.04系统上安装opencv3.2.0以及对应的opencv_contrib3.2.0 安装过程 下载 Github上下载有的时候比较慢,我这里分享了OpenCV3 ...

  6. HDU 1551 Cable master【二分答案】

    题意:给出n块木板,它们分别的高度,现在要把它们裁切成k块,问裁切成的最大的高度 二分答案,上限是这n块木板里面的最大值 然后每一个答案去判断一下是否满足能够裁切成k块 #include<ios ...

  7. 关于js里的document.compatmode

    document.compatmode为获取页面的渲染模式. 其中有两个渲染模式 1.CSS1Compat(标准模式).浏览器宽度:document.documentElement.clientHei ...

  8. mysql插入数据出现java.lang.NullPointerException

    在写购物车持久层的时候,要进行测试的时候居然出现了空指针异常: 最后发现是测试类少了 @RunWith(SpringRunner.class)@SpringBootTest 如下是没改之前的测试类: ...

  9. shell编程, 100文钱买100只鸡, 简单实现

    今天碰到一个有趣的问题: 群友用shell写的一个: #!/bin/bash # 百元买百鸡,每种鸡至少买一只 all= # 公鸡每只多少元 read -p '公鸡多少文一只: ' gongji # ...

  10. vue项目测试和打包发布

    在线测试:npm run dev 发布打包:npm run build  打包后,代码文件在dist文件夹下面,可以正式发布了,复制到其它web服务器下面,在浏览器用http访问.