vue基础案例1
来源:互联网 发布:asp.net程序员 编辑:程序博客网 时间:2024/04/28 17:29
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <style> *{ margin: 0; padding: 0; } body{ font:15px/1.3 'Open Sans',sans-serif; color: #5e5b64; text-align: center; } a,a:visited{ outline:none; color: #389dc1; } a:hover{ text-decoration: none; } section,footer,header,aside,nav{ display:block; } /* The menu */ nav{ display: inline-block; margin: 60px auto 45px; background-color: #5597b4; box-shadow: 0 1px 1px #ccc; border-radius: 2px; } nav a{ display: inline-block; padding: 18px 30px; color: #fff !important; font-weight: bold; font-size: 16px; text-decoration: none !important; line-height: 1; text-transform: uppercase; background-color:transparent; -webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s; transition: background-color 0.25s; } nav a:first-child{ border-radius: 2px 0 0 2px; } nav a:last-child{ border-radius: 0px 2px 2px 0px; } nav.home .home, nav.projects .projects, nav.services .services, nav.contact .contact{ background-color: #e35885; } p{ font-size: 22px; font-weight: bold; color: #7d9098; } p b{ color: #fff; display: inline-block; padding: 5px 10px; background-color: #c4d7e0; border-radius: 2px; text-decoration: uppercase; font-size: 18px; } </style> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="main"> <nav :class="active" @click.prevent> <a href="#" class="home" @click="makeActive('home')">Home</a> <a href="#" class="projects" @click="makeActive('projects')">Projects</a> <a href="#" class="services" @click="makeActive('services')">Services</a> <a href="#" class="contact" @click="makeActive('contact')">Contact</a> </nav> <p>You chose <b>{{active}}</b></p> </div> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> <script> var vue = new Vue({ el:"#main", data:{ active:"home" }, methods:{ makeActive:function(item){ this.active = item; } } }); </script> </body></html>
阅读全文
1 0
- vue基础案例1
- vue基础案例2
- vue基础案例3
- vue基础案例4
- vue基础案例5
- Vue案例
- vue基本小案例
- vue入门案例
- vue + elementui 新手入门案例
- vue组件简单案例
- vue基础
- vue基础
- vue基础
- Vue-基础
- vue基础
- Vue基础
- js基础1应用案例
- Vue基础之Vue实例
- 为什么要进行内存对齐以及对齐规则
- EA&UML日拱一卒-多任务编程超入门-(15)共享内存
- 基本数据类型 与 包装类
- 13. 初始化列表
- 开博第一文
- vue基础案例1
- Android Some file crunching failed
- 有关Java中@的代指——注解
- JS实现两个页面之间的通信
- Codeforces903C
- 67. Add Binary
- linux学习笔记3
- 前端窗口聊天效果
- 新玩法异常火爆,惠民还是另藏骗局