自定义指令-基础配置
2023-09-14 08:57:25 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .card{ width: 200px; background: #ccc; padding: 10px; margin: 5px; } </style> </head> <body> <div id="app"> <div v-pin="card1.pinned" class="card"> <button @click="card1.pinned = !card1.pinned">点我啊~</button> this is my first card! this is my first card! this is my first card! this is my first card! this is my first card! </div> <div v-pin="card2.pinned" class="card"> <a @click="card2.pinned = !card2.pinned" href="#">please touch me</a> this is my second card! this is my second card! this is my second card! this is my second card! this is my second card! </div> <div> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> this is my test code@! <br> </div> </div> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
Vue.directive("pin",function (el,binding) {
var pinned = binding.value;
if(pinned){
el.style.position = "fixed",
el.style.top = "20px",
el.style.left = "20px"
}else{
el.style.position = "static"
}
});
var app = new Vue({
el:"#app",
data:{
card1:{
pinned:false
},
card2:{
pinned:false
}
}
});
相关文章
- 【Python基础】PyCharm配置Python虚拟环境详解[通俗易懂]
- shell脚本读mysql配置批量执行脚本
- Gitlab CI/CD 实践五:基础镜像 Dcokerfile 仓库 CI 流水线配置
- 2.vSphere基础操作配置
- Multipath多路径管理基础介绍与安装配置使用
- 持续集成gitlab-ci.yml配置文档基础
- EmWin学习课堂_小白EmWin_EmWin快速入门_EmWin动态内存,显示和触摸屏_EmWin基础配置
- Spring基础(十六):Spring事务管理注解方式和XML配置方式
- PPPoE客户端原理与配置_路由交换基础
- 全文检索工具solr:第二章:安装配置
- umi 常用配置
- SpringCloud Config分布式配置中心
- 腾讯云轻量服务器性能评测:配置 8核 16G 18M 带宽
- 【Android FFMPEG 开发】音视频基础 和 FFMPEG 编译 ( 音视频基础 | MPEG-4 标准 | Android 开发环境 | FFMPEG 交叉编译 | 安卓项目导入配置 )
- 在 Linux 上查看和配置密码时效的方法
- Oracle 参数 DDL_LOCK_TIMEOUT 官方解释,作用,如何配置最优化建议
- Linux三网卡配置使用指南(linux三网卡)
- 配置Linux LAMP环境快速上手(linuxlamp配置)
- Linux系统快速基础配置指南(linux基础配置)
- MySQL 配置字符集:指南及实践(mysql配置字符集)
- MySQL设置字符集:配置正确的字符编码(mysql设置字符集)
- Redis 配置主节点安全密码设置(redis配置主节点密码)
- Jenkins CI持续集成项目基础配置
- Linux网络服务器配置基础
- Windows下Nginx+PHP5的安装与配置方法
- nginx基础配置说明一则