1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>自定义指令：directive</title>
  7.     <script src="vue.js"></script>
  8. </head>
  9. <body>
  10. <!--
  11.     directive:
  12.         bind  inserted:插入的  update
  13. -->
  14. <div id="demo">
  15.     <h3 v-star="color">标题部分</h3>
  16.     <input type="text" v-model="color" v-focus>
  17.     <h1 v-hide="true">{{title}}</h1>
  18. </div>
  19. <script>
  20.     new Vue({
  21.         el: "#demo",
  22.         data: {
  23.             title: "百度一下就知道",
  24.             color: "red"
  25.         },
  26.         directives: {
  27.             star(el, bind) {
  28.                 var color = bind.value ? bind.value : 'red';
  29.                 el.style.cssText = "color:" + color;
  30.             },
  31.             focus: {
  32.                 inserted(el, bind) {
  33.                     el.focus();
  34.                 }
  35.             },
  36.             hide(el,bind){
  37.                 if(bind.value){
  38.                     el.style.cssText="display:none";
  39.                 }
  40.             }
  41.         }
  42.     });
  43. </script>
  44.  
  45. </body>
  46.  
  47. </html>

　　

051——VUE中自定义指令：directive的更多相关文章

  1. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  2. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  3. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  4. Vue中自定义指令的使用方法！

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...

  5. Vue(九)---自定义指令(directive )

    1.无参数 自定义指令的方式:1. 使用Vue.directive 来自定义2. 第一个参数就是 指令名称 xart3. el 表示当前的html dom对象4. 在方法体内就可以通过 innerHT ...

  6. vue之自定义指令directive

    <template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...

  7. vue怎么自定义指令？？

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  8. vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  9. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

随机推荐

  1. ubuntu 下安装 jdk

    1. 下载 jdk : https://www.oracle.com/technetwork/java/javase/downloads/index.html 2. 解压 jdk 到系统默认 jdk ...

  2. saltstack相关

    通过saltstack实现根据不同业务特性进行配置集中化管理,分发文件,采集服务器数据,操作系统基础及软件包管理等第一层为web交互层,采用django+mysql+bootstarp实现,服务端采用 ...

  3. Linux下Rsync+Inotify-tools实现数据实时同步

    Linux下Rsync+Inotify-tools实现数据实时同步 注意:下面的三个案例都是rsync 每次都是全量的同步(这就坑爹了),而且 file列表是循环形式触发rsync ,等于有10个文件 ...

  4. 用tsunami-udp加速网络传输

    概述 tsunami-udp是一款专为网络加速诞生的小工具. 思路很简单,使用TCP进行传输控制.UDP进行数据传输. 这样可以无状态的进行数据传输,然后中间加一些文件校验和重传机制,达到加速传输的目 ...

  5. 经验搜索排名---google已经做过类似的了(我想多了)

    由于编程的原因,我们需要经常的查资料,现在转载的文章比较多,我们经常看到的搜索结果的前十名基本上有7名是转载的.这样看起来很没有效率,后来突然想到,如果把大家的浏览结果搜集起来,然后进行权重排名,这样 ...

  6. 使用Markdown写博客

    初识Markdown Markdown是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿这广泛使用.Markdown的设计目标是「易读易写」,语法十分简单,常用的标记符号不超 ...

  7. Codeforces Round #522 (Div. 2, based on Technocup 2019 Elimination Round 3) Solution

    A. Kitchen Utensils Water. #include <bits/stdc++.h> using namespace std; #define N 110 int n, ...

  8. Linux 基础 —— Linux 进程的管理与监控

    这篇文章主要讲 Linux 中进程的概念和进程的管理工具.原文:http://liaoph.com/inux-process-management/ 进程的概念 什么是进程 进程(Process)是计 ...

  9. CUDA、tensorflow与cuDNN的版本匹配问题【转】

    本文转载自:https://blog.csdn.net/MahoneSun/article/details/80809042 一.问题现象 CUDA.tensorflow 与 cuDNN有版本匹配的问 ...

  10. [QA翻译]如何在Storm里拆分stream流？

    原文:http://stackoverflow.com/questions/19807395/how-would-i-split-a-stream-in-apache-storm 问题:我现在不清楚如 ...