【Vue.js 入门与实战】--指令-指令函数的简写形式

简介: 指令-指令函数的简写形式

指令-指令函数的简写形式

 

目录

一、函数简写

二、演示

 

一、函数简写

本节,我们主要学习,函数简写,我们知道,大多数情况下,如果在bind update 钩子上做重复动作,并不关心其它的钩子函数。如果代码只需要写到bind update里。就不需要在后面跟对象,可以直接这样写:


Vue.directive('color-swatch', function (el, binding) {

el.style.backgroundColor = binding.value

})

第一个参数是指定的名称,第二个是functionfunction 表示在bind update中将代码各书写了一份。

 

 

二、演示

directives:{//自定义私有指令

‘fontweicht’: {/设置字体粗细

bind:tunction(el.binding){

el.style.fontweight =binding.value

}

}

‘fontsize': function (el, binqing) {// function 等同于把代码写到了 bind update

el.style.fontsize =parseInt (binding.value)+ ‘px’

调用指令:

<div id=”app2”>

<h3 v-color="'pink'" v-fontweight="900 v-fontsize="’30px’"> {{dt | dateformat}}</h3>

</div>


演示结果:

image.png

以上就是函数简写。

相关文章
|
14天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
14天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
10 0
|
15天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
26天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
1天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
12 4
|
2天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
25 1
|
24天前
|
JavaScript
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停恢复的特殊函数,用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。
16 6
|
1月前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0