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.用户输入内容后,通 ...
随机推荐
- stark - 增、删、改
一.效果图 二.增.删.改 知识点: 1.解决代码重用 {% include 'form.html' %} 2.自定制配置modelform 每张表,就可自定义配置 labels , widges.. ...
- 20144306《网络对抗》MAL_后门原理与实践
本期收获 1.了解后门的基本概念. 2.Netcat.socat.MSF meterpreter的使用(MSF meterpreter实在太好玩了) 3.后门软件的启动方式: Windows任务计划程 ...
- Python开发【数据结构】：排序练习
排序练习 问题一: 现在有一个列表,列表中的数范围都在0到100之间,列表长度大约为100万.设计算法在O(n)时间复杂度内将列表进行排序. import random data = [random. ...
- 【Loadrunner】性能测试报告实战
一.一份好的性能测试报告需要遵循什么规则? 好的报告只需要遵循3点即可:清晰的结构.简要的语言以及数据的对比. 二.如何用Loadrunner自动到处HTML以及word版的报告? 1.导出html格 ...
- SQL Server分区键列必须是主键一部分
SQL Server分区键列必须是主键一部分. 必须把分区列包含在主键/唯一约束/唯一索引的键列中. USE tempdb GO -- 测试表 CREATE TABLE dbo.tb( id int, ...
- Django之logging日志使用
Logger模块 是python中用于便捷记录日志且线程安全的模块 使用logging模块记录日志涉及四个主要类: logger提供了应用程序可以直接使用的接口: handler将(logger创建的 ...
- Selenium之IE浏览器的启动
1.下载IEDriverServer.exe文件放至需要的目录中: 2.编写代码 import org.openqa.selenium.WebDriver; import org.openqa.sel ...
- Websocket、长连接、循环连接
[转]转自知乎高票回答 https://www.zhihu.com/question/20215561 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系 ...
- CCPC-Wannafly Winter Camp Day3 (Div2, onsite)
Replay Dup4: 没想清楚就动手写? 写了两百行发现没用?想的还是不够仔细啊. 要有莽一莽的精神 X: 感觉今天没啥输出啊, 就推了个公式?抄了个板子, 然后就一直自闭A. 语文差,题目没理解 ...
- PHP保存Base64图片base64_decode的问题 文件打不开的问题
PHP对Base64的支持非常好,有内置的base64_encode与base64_decode负责图片的Base64编码与解码. 编码上,只要将图片流读取到,而后使用base64_encode进 ...