051——VUE中自定义指令：directive
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>自定义指令：directive</title>
<script src="vue.js"></script>
</head>
<body>
<!--
directive:
bind inserted:插入的 update
-->
<div id="demo">
<h3 v-star="color">标题部分</h3>
<input type="text" v-model="color" v-focus>
<h1 v-hide="true">{{title}}</h1>
</div>
<script>
new Vue({
el: "#demo",
data: {
title: "百度一下就知道",
color: "red"
},
directives: {
star(el, bind) {
var color = bind.value ? bind.value : 'red';
el.style.cssText = "color:" + color;
},
focus: {
inserted(el, bind) {
el.focus();
}
},
hide(el,bind){
if(bind.value){
el.style.cssText="display:none";
}
}
}
});
</script> </body> </html>
051——VUE中自定义指令：directive的更多相关文章
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...
- Vue中自定义指令的使用方法！
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...
- Vue(九)---自定义指令(directive )
1.无参数 自定义指令的方式:1. 使用Vue.directive 来自定义2. 第一个参数就是 指令名称 xart3. el 表示当前的html dom对象4. 在方法体内就可以通过 innerHT ...
- vue之自定义指令directive
<template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
随机推荐
- Benefits of Using the Spring Framework Dependency Injection 依赖注入 控制反转
小结: 1. Dependency Injection is merely one concrete example of Inversion of Control. 依赖注入是仅仅是控制反转的一个具 ...
- Rancher OS
Rancher OS 是生产规模中运行 Docker 最小,最简单的方式.RancherOS 的所有东西都作为 Docker 管理的容器.这些系统服务包括 udev 和 rsyslog.Rancher ...
- Windows环境下手动更新boot2docker.iso
GitHub连不上导致自动更新失败. https://github.com/boot2docker/boot2docker/releases 替换了DockerToolbox安装目录和系统盘用户目录\ ...
- Mirror--镜像用户同步
--=========================================--在镜像搭建后,在主库服务器上创建登录,并在数据库上建立对应用户,--数据库中用户被同步到镜像数据库中,但登录是 ...
- Spark中ml和mllib的区别
转载自:https://vimsky.com/article/3403.html Spark中ml和mllib的主要区别和联系如下: ml和mllib都是Spark中的机器学习库,目前常用的机器学习功 ...
- Saltstack入门
一.Salt概述 一个配置管理系统,能够维护预定义状态的远程节点(比如,确保指定的报被安装,指定的服务在运行). 一个分布式远程执行系统,用来在远程节点(可以是单个节点,也可以是任意规则挑选出来的节点 ...
- 如何使用iClap创建普通批注
iClap是一款以产品管理为基础的企业协同办公软件,其中智能批注为其产品管理的核心工具,我们可以以图片,文字和视频的形式创建批注.本文为大家介绍的是如何在iClap上创建普通批注(图片,文字形式). ...
- C Strange Sorting
C. Strange Sorting time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- python webdriver 登录163邮箱发邮件加附件， 外加数据和程序分离，配置文件的方式
配置文件:UiObjectMapSendMap.ini用来存放配置信息 GetOptionSendMail.py 用来读取配信息 #encoding=utf-8from selenium.webdri ...
- Labeled Faces in the Wild 人脸识别数据集
http://blog.csdn.net/garfielder007/article/details/51480525 New (draft) survey paper: Labeled Faces ...