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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JavaScript 继承的实现
Jul 09 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
angular2模块和共享模块详解
Apr 08 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实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
jupyter实现重新加载模块
2020/04/16 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python能开发游戏吗
2020/06/11 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
自主招生自荐书
2013/11/29 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
学生会主席演讲稿
2014/04/25 职场文书
纪检监察建议书
2014/05/19 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
家长反馈意见及建议
2015/06/03 职场文书
祝酒词范文
2015/08/12 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Django基础CBV装饰器和中间件
2022/03/22 Python
解决redis批量删除key值的问题
2022/03/23 Redis