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.用户输入内容后,通 ...
随机推荐
- win安装mysql
在这讲解的是有关于通过zip解压安装MySQL的方法.有看了网上的其它的教程,讲的有些不够完善,也自己写一篇简述一下.个人还是建议看官方的参考文档非常之详细:https://dev.mysql.com ...
- java-mybaits-00701-与spring整合
1.1 整合思路 需要spring通过单例方式管理SqlSessionFactory. spring和mybatis整合生成代理对象,使用SqlSessionFactory创建SqlSes ...
- 实现linux下的ls
实现linux下的ls ls的使用 ls -a 列出文件下所有的文件,包括以"."开头的隐藏文件(linux下文件隐藏文件是以.开头的,如果存在..代表存在着父目录). ls -l ...
- BUCT20180814邀请赛 Solution
A:SUM 水. #include<bits/stdc++.h> using namespace std; #define N 100010 typedef long long ll; i ...
- 2018-2019 ACM-ICPC, Asia Seoul Regional Contest
ProblemA Circuits Solved. 题意: 有$n$个矩形,可以放两条平行与$x$轴的线,求怎么放置两条无线长的平行于$x$轴的线,使得他们与矩形相交个数最多 如果一个矩形同时与两条线 ...
- 20145221 《Java程序设计》第二周学习总结
20145221 <Java程序设计>第二周学习总结 教材学习内容总结 第二周内容已在假期完成,详见博客: <Java程序设计>第三章-基础语法 代码调试中的问题和解决过程 第 ...
- usb_submit_urb
hub_irq() --> usb_submit_urb() usb_start_wait_urb() --> usb_submit_urb() 一旦urb被USB驱动程序正确地创建和初始 ...
- ActiveMQ（1） -- 入门案例
- Codeforces Round #390 (Div. 2) A. Lesha and array splitting
http://codeforces.com/contest/754/problem/A 题意: 给出一串序列,现在要把这串序列分成多个序列,使得每一个序列的sum都不为0. 思路: 先统计一下不为0的 ...
- UVa 11825 黑客的攻击（状态压缩dp）
https://vjudge.net/problem/UVA-11825 题意: 假设你是一个黑客,侵入了一个有着n台计算机(编号为0,1,...,n-1)的网络.一共有n种服务,每台计算机都运行着所 ...