Vue.js实现按钮的动态绑定效果及实现代码


Posted in Javascript onAugust 21, 2017

实现效果:

Vue.js实现按钮的动态绑定效果及实现代码

实现代码以及注释:

<!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>
Javascript 相关文章推荐
jQuery插件的写法分享
Jun 12 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
Node.js简单入门前传
Aug 21 #Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 #Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 #Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
详解webpack的配置文件entry与output
Aug 21 #Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
原生JS 购物车及购物页面的cookie使用方法
Aug 21 #Javascript
You might like
php 定义404页面的实现代码
2012/11/19 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
javascript控制swfObject应用介绍
2012/11/29 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python中一行和多行import模块问题
2018/04/01 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python opencv调用笔记本摄像头
2019/08/28 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
如何基于python实现不邻接植花
2020/05/01 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
盲山观后感
2015/06/11 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis