vue组件中 IS 用法
2024-08-25 06:39:04
//html <link rel="stylesheet" href="http://www.jq22.com/demo/animate-141106223642/animate.min.css" /> <script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script> <div id="app"> <span class="area1" @click="isGet(1)" :class="[c1]">tap1</span> <span class="area1" @click="isGet(2)" :class="[c2]">tap2</span> <span class="area1" @click="isGet(3)" :class="[c3]">tap3</span> <component :is="keet" keep-alive class="animated" transition="bounce" transition-mode="out-in" ></component> </div>
//js Vue.transition("bounce", { enterClass: '', leaveClass: 'bounceInLeft' }) new Vue({ el:'#app', data:{ keet:"first", c1:'add_active', c2:'', c3:'' }, methods:{ isGet:function(val){ switch(val){ case 1:this.keet = "first";this.c1='add_active'; this.c2="";this.c3="";break; case 2:this.keet = "second";this.c1="";this.c2="add_active"; this.c3="";break; case 3:this.keet = "third";this.c1="";this.c2=""; this.c3="add_active";break; } } }, components:{ first:{ template:"<div>1</div>" }, second:{ template:"<div>2</div>" }, third:{ template:"<div>3</div>" } }, ready:function(){ } })
//css .area1{display:inline-block;width:80px;height:80px;border:1px solid #ccc;} div div{width:200px;height:200px;background:#abcdef;line-height:200px; margin-top:20px;text-align:center;font-size:30px;} .add_active{border:1px solid #f00;}
//预览结果
最新文章
- WinFrom窗体始终置顶
- Linux Kernel 代码艺术——编译时断言
- 计算字符串高度 iOS
- STATIC::含义
- java的IO流
- Tomcat的startup.bat一闪而过问题的解决
- 解析CSS加密技术之“障眼法”
- oracle报错ORA-01507
- mysql select 语法
- UOJ #78 二分图最大匹配
- ajax实现下拉列表联动
- (简单) POJ 2406 Power Strings,扩展KMP。
- --@angularJS--$http服务与后台数据交互
- ROS学习记录(二)————使用smartcar进行仿真(用.xacro文件来运行rviz)
- ubuntu下MySQL修改root密码的多种方法,phpmyadmin空密码无法登陆的解决方法
- 《精通c#(第6版)》【PDF】下载
- 美团点餐—listview内部按钮点击事件
- 分治FFT的三种含义
- OO期末总结
- C#生成树形结构泛型类
热门文章
- NodeJS学习笔记 进阶 (3)Nodejs 进阶:Express 常用中间件 body-parser 实现解析(ok)
- 欢迎访问微先锋vXianFeng官方博客
- springboot框架笔记——springboot提供的自动配置
- js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join
- 三 概要模式 2) MR倒排索引、性能分析、搜索干扰词。
- 二 HTable 源码导读
- 移动端web app开发备忘
- PIO Core
- Android活动状态和生存期
- POJ - 3842 An Industrial Spy dfs(水)