//这里直接上代码 

<!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. 50个Android开发技巧(12 为控件加入圆角边框)

    控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) ...

  2. angular4过滤器

    Angular4中过滤器 一.大小写转换过滤器 uppercase将字符串转换为大写 lowercase将字符串转换为小写 <p>将字符串转换为大写{{str | uppercase}}& ...

  3. 线程进阶：多任务处理（17）——Java中的锁（Unsafe基础）

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  4. oracle-常见的执行计划（一）

    一.表访问方式 CBO基础概念中有讲到,访问表的方式有两种:全表扫描和ROWID扫描. 全表扫描的执行计划:TABLE ACCESS FULL ROWID扫描对应执行计划:TABLE ACCESS B ...

  5. SharePoint 网站中定义的页面背景图片不起作用

    If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS clas ...

  6. C#调用webservice(一)

    最近一直在搞网络编程,这篇是关于webservice的,准备写两篇例子这篇是实现手机号码归宿地查询,下篇准备写实现机票查询. 这个网站(http://www.webxml.com.cn/zh_cn/i ...

  7. HTML&CSS——网站注册页面

    1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性:  action,整个表单提交的位置(可以是一个页面,也可以是一个后 ...

  8. 【原创】VSFTP: Login failure: 530 Login incorrect的解决办法

    1.修改/etc/vsftpd/ftpusers和/etc/vsftpd/user_list中关于root的行,注释掉即可: 2.关闭SELinux:如果不想关闭的话,可以打开home项的布林值:se ...

  9. BZOJ 1444 [JSOI2009]有趣的游戏 (Trie图/AC自动机+矩阵求逆)

    题目大意:给你$N$个长度相等且互不相同的模式串,现在有一个字符串生成器会不断生成字符,其中每个字符出现的概率是$p_{i}/q_{i}$,当生成器生成的字符串包含了某个模式串,则拥有该模式串的玩家胜 ...

  10. JMS消息

    1.消息可分为3部分:消息头.属性和有效负载 消息头:用于标识消息.声明消息属性及提供路由信息的特殊字段组成. 消息的属性区包含了和该消息有关的附加元数据,这个元数据由应用程序开发者进行设置,或者由J ...