万象更新 Html5 - vue.js: vue 指令(自定义指令)

news/2024/9/24 11:15:10

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - vue.js: vue 指令(自定义指令)

示例如下:

vue\directive\vcustom.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue 指令(自定义指令)</title><script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>
<body><div id="root"><!--使用自定义指令--><div v-webabcd="128">自定义指令</div>
</div><script>var app = Vue.createApp({});// 定义一个自定义指令(注:定义的名称不包括 v- 前缀)// el - 指定绑定的元素// binding - 一个对象//   name - 指令名,不包括 v- 前缀//   value - 指令的绑定值(比如 v-webabcd="1 + 1" 其 value 为 2)//   expression - 指令的表达式,字符串类型(比如 v-webabcd="1 + 1" 其 expression 为 "1 + 1")//   arg - 指令的参数(比如 v-webabcd:abc 其 arg 为 "abc")//   modifiers - 指令的修饰符对象(比如 v-webabcd.x.y 其 modifiers 为 { x: true, y true })app.directive('webabcd', function (el, binding) {el.style.fontSize = binding.value + "px";});var vm = app.mount('#root');
</script></body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/64098.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode 445. 两数相加 II

1.题目基本信息 1.1.题目描述 给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外,这两个数字都不会以零开头。 1.2.题目地址 https://leetcode.cn/problems/add…

Windows命令:时间延迟命令

延迟一段时间再执行下一条命令”。 一、利用ping实现延迟命令 这种延时手段是不精确的,因为每一次ping通的延迟不一样。 1、示例chcp 65001 @echo off echo 延时前:%time% ping /n 3 127.0.0.1 >nul echo 延时后:%time% pause 参数/n表示ping通的次数。127.0.0.1是本机ip…

电力施工作业绝缘手套识别系统

电力施工作业绝缘手套识别系统对电力作业人员在电力设备上进行施工作业时是否佩戴绝缘手套进行识别分析,当电力施工作业绝缘手套识别系统检测到作业人员未佩戴绝缘手套时立即抓拍存档同步回传给后台监控人员,提醒相关人员及时制止,及时规避更危险的触电事故发生。电力施工作…

sicp每日一题[2.24-2.27]

2.24-2.26没什么代码量,所以跟 2.27 一起发吧。Exercise 2.24Suppose we evaluate the expression (list 1 (list 2 (list 3 4))). Give the result printed by the interpreter, the corresponding box-and-pointer structure, and the interpretation of this as a tree (as…

ansible-cmdb简单使用

1、安装 官方:https://ansible-cmdb.readthedocs.io/en/latest/ wget https://github.com/fboender/ansible-cmdb/releases/download/1.27/ansible-cmdb-1.27-2.noarch.rpm yum -y install ./ansible-cmdb-1.27-2.noarch.rpm2、使用 首先,为你的主机生成 Asible 输出: mkdir…

ToEasy利用99元阿里云服务器内网穿透的实操过程

一、准备工作: 1、阿里云99元服务器(安装Windows)或者其他windows云服务器 2、frp内网穿透软件 3、数据库MSSQL 2014绿色版 4、ToEasy服务器和客户端软件 二、内网穿透设置 解压frp软件后,打开配置文件frps.toml和frpc.toml进行设置。 1、服务端(frps.toml)#bindAddr = &…

PARTIV-Oracle数据库存储结构-逻辑存储结构

12.逻辑存储结构 12.1. 逻辑存储结构简介 Oracle数据库为数据库中的所有数据分配逻辑空间。数据库空间分配的逻辑单位是数据块、区间、段和表空间。在物理层面,数据存储在磁盘上的数据文件中(见第11章“物理存储结构”)。数据文件中的数据存储在操作系统块中。图12-1是物理和…

MySQL性能优化

性能调优 MySQL调优的五个维度 对于MySQL的性能优化,其实也可以从多个维度出发,共计优化项如下:①客户端与连接层的优化:调整客户端DB连接池的参数和DB连接层的参数。 ②MySQL结构的优化:合理的设计库表结构,表中字段根据业务选择合适的数据类型、索引。 ③MySQL参数优化…