Vue 自定义指令练习
Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象
取值:
<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive("demo", function (el, binding) {
alert(binding.value.color);
alert(binding.value.text);
})
实例:
用自定义指令实现全选和取消全选
<div id="app">
<ul>
<li v-for="item in list">
<input type="checkbox" v-sel="item.checked" /> {{item.name}}
</li>
</ul>
<br />
{{list}}
<br />
<button v-on:click="clickall(true)">全选</button>
<button v-on:click="clickall(false)">取消全选</button> </div>
<script type="text/javascript">
Vue.directive("sel", function (el, v) {
if (v.value) {
$(el).attr("checked", "checked");
} else {
$(el).removeAttr("checked");
} }); var vm = new Vue({
el: "#app",
data: {
list: [{ name: "足球", checked: true }, { name: "篮球", checked: false }, { name: "乒乓球", checked: true }]
},
mounted:function() {
}
,
methods: {
clickall: function (flag) {
if (flag) {
this.list.forEach(function (v, i) {
v.checked = true;
});
} else {
this.list.forEach(function (v, i) {
v.checked = false;
});
}
}
}
});
</script>
高级功能:
<div v-pin:true.left.bottom="true"></div> Vue.directive("pin", function (el, binding) { var pinned = binding.value;//取引号中的值
var warning = binding.arg;//取:后面的值
var position = binding.modifiers;//取.后页的参数 for (var key in position){
if (position[key]) {
el.position[key] = '10px';
}
}
});
Vue 自定义指令练习的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
随机推荐
- 20155215 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
20155215 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑 ...
- 好玩的虚拟机和有趣的Linux系统 ——20155332
color=#安装虚拟机 学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 我从官网下载了Ubuntu64位操作系统和VMare Workstion虚拟机 ...
- PHP学习笔记之interface关键字
interface用于定义接口 接口里边的方法不需要有方法的实现 implements用于表示类实现某个接口 实现了某个接口之后,必须提供接口中定义的方法的具体实现. 可以用instanceof关键字 ...
- [BZOJ1565][NOI2009]植物大战僵尸-[网络流-最小割+最大点权闭合子图+拓扑排序]
Description 传送门 Solution em本题知识点是用网络流求最大点权闭合子图. 闭合图定义:图中任何一个点u,若有边u->v,则v必定也在图中. 建图:运用最小割思想,将S向点权 ...
- day8 RHCE
12 .实现一个 web 服务器在server0上配置一个站点http://server0.example.com,然后执行以下步骤: 从http://classroom.example.com/ma ...
- 【LG4091】[HEOI2016/TJOI2016]求和
[LG4091][HEOI2016/TJOI2016]求和 题面 要你求: \[ \sum_{i=0}^n\sum_{j=0}^iS(i,j)*2^j*j! \] 其中\(S\)表示第二类斯特林数,\ ...
- Mac Eclipse快捷键
Command + O:显示大纲Command + 1:快速修复Command + D:删除当前行Command + Option + ↓:复制当前行到下一行Command + Option + ↑: ...
- 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(中)
接<基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(上)> 三.代码分析 1.界面初始化 bool PlaneWarGame::init() { bool bRet = fals ...
- 教程:将应用迁移到 DirectX* 12 – 第 1 部分
原文地址 简介 随着微软* 新版操作系统 Windows 10* 的发布,核心图形技术将升级到最新的 DirectX* 12.要帮助拥有 DirectX* 开发经验的程序员熟悉 DirectX* 12 ...
- 【snmp】Linux开启snmp及查询
1.Linux snmp 1.安装snmp yum install -y net-snmp* 2.备份snmp配置 cp /etc/snmp/snmpd.conf /etc/snmp/snmpd.co ...