Vue.js实现按钮的动态绑定效果及实现代码
2017-08-21 14:33
1166 查看
实现效果:
实现代码以及注释:
<!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>
您可能感兴趣的文章:
相关文章推荐
- 【前端】vue.js实现按钮的动态绑定
- JS 非图片动态loading效果实现代码
- JS+CSS实现分类动态选择及移动功能效果代码
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- vue.js实现点击后动态添加class及删除同级class的实现代码
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- js点击按钮实现水波纹效果代码(CSS3和Canves)
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- Vue.js实现输入框绑定的实例代码
- JS+CSS实现分类动态选择及移动功能效果代码
- vue动态绑定组件子父组件多表单验证功能的实现代码
- 使用vue.js实现联动效果的示例代码
- vue.js 实现点击按钮动态添加li的方法
- 走马灯效果代码js appendChild实现的无缝滚动
- JS 拖动效果实现代码 比较简单
- 走马灯效果代码js appendChild实现的无缝滚动
- js tab效果的实现代码