时间:2021-05-26
实现效果:
实现代码以及注释:
<!DOCTYPE html><html><head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font: 15px/1.3 'Open Sans', sans-serif; color: #5e5b64; text-align: center; } a, a:visited{ outline: none; color: #3b9dc1; } a:hover{ text-decoration: none; } section, footer, header, aside, nav{ display: block; } 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; z-index: 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:0 2px 2px 0; } 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:#ffffff; display:inline-block; padding:5px 10px; background-color:#c4d7e0; border-radius:2px; text-transform:uppercase; font-size:18px; } </style></head><body><div id="main"> <!--导航栏菜单会得到处于active的变量的值作为一个class --> <!-- 为了防止当我们点击链接时页面发生跳转,我们使用prevent优化 --> <nav v-bind:class="active" v-on:click.prevent> <!-- 当一个菜单中的链接被点击,我们调用定义在javaScript vue中的makeActive方法 --> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="home" v-on:click="makeActive('home')">Home</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="projects" v-on:click="makeActive('projects')">Projects</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="services" v-on:click="makeActive('services')">Services</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="contact" v-on:click="makeActive('contact')">Contact</a> </nav> <!-- mustache表达式将被active的值替换,它将发生任何变化它都将会自动更新--> <p>YOU SELECTED <b>{{active}}</b></p></div><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script><script type="text/javascript"> // 创建一个Vue示例,并且传递一个可选对象 var demo = new Vue({ // 一个DOM元素表示我们的view模型 el: '#main', // 定义属性值,给定初始化值 data: { active: 'home' }, // 我们需要使用到的函数 methods: { makeActive: function(item){ // 当一个model发生变化,view会自动更新 this.active = item; } } });</script></body></html>声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下实现效果:实现代码及注释:价格计算器/*隐藏未编译的数据绑定,直到Vue实
本文为大家分享了使用vue.js结合bootstrap开发的分页控件,供大家参考,具体内容如下效果如下实现代码:Vue-PagerTest数据姓名年龄删除信息{
现在来系统地学习一下Vue(参考vue.js官方文档):Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件。Vue.js
做为一名学习路上的小白,起初就对vue.js有着莫名的好感,知道vue.js也能实现angular.js的双向绑定等一些功能后,妥妥的先把angular.js和
本文实例为大家分享了Vue.js实现分页查询的具体代码,供大家参考,具体内容如下vue.js的使用如下:1、引入vue.jsa、分页条b、分页条js、css2、