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.用户输入内容后,通 ...
随机推荐
- talib 中文文档（十五）：Math Operator Functions 数学方法
Math Operator Functions 数学运算符函数 ADD - Vector Arithmetic Add 函数名:ADD 名称:向量加法运算 real = ADD(high, low) ...
- 自动化测试学习day4
主要学习内容:修改文件.集合.函数.模块 修改文件两种方法 修改文件方法一(缺点:代码繁琐,一次性将文件读出,文件过大可能会卡住) with open('geci', 'a+', encoding=' ...
- Gunicorn独角兽
1. 关于Gunicorn Gunicorn是一个开源的Python WSGI HTTP服务器,移植于Ruby的Unicorn项目的采用pre-fork模式的服务器.Gunicorn服务器可与各种We ...
- java观察者(Observer)模式
观察者模式: 试想,在电子商务网站上,一个用户看中了一件一份,但是当时衣服的价格太贵,你需要将衣服收藏,以便等衣服降价时自动通知该用户.这里就是典型的观察模式的例子. 1.观察者模式的 ...
- 转！！git如何撤销上一次commit(或已push)
原博文地址 : https://www.cnblogs.com/lyy-2016/p/6509707.html git如何撤销上一次commit操作 1.第一种情况:还没有push,只是在本地comm ...
- [World Wind学习]22.相机高度和瓦片等级计算
在这里我们看到判断Lod的级别主要有三个条件: * 1.相机视角范围,视角范围越大,所包含的tileSize就越大 * 2.相机与瓦片距离,距离越远,所包含的tileSize也就越大 * 3.相机视锥 ...
- mono安装
linux上的DotNET,安装mono 当前,在Linux系统上架设ASP.NET网站.建设WEB应用工程项目已经在国内流行起来,而“Mono+Jexus”架构模式是Linux承载ASP.NET企业 ...
- 4.12 Routing -- Preventing And Retrying Transitions
一.概述 在一个路由的跳转过程中,Ember路由器传递一个跳转对象到被跳转调用的路由的不同的hooks中.任何一个hook获取这个跳转对象,有能力通过调用transition.abort()终止跳转, ...
- cocos-lua基础学习（四）quick层封装后的目录结构
命名空间 cc cocos2d核心类 ccb cocosbuilder扩展 ccs cocostudio扩展 cocos2d目录结构 bitExtend.lua cocos2d.lua cocos2d ...
- mysql数据库权限
use mysql select * from user \G; UPDATE user set password=PASSWORD('root') where user='root' grant a ...