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>
(0)

相关推荐

  • VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)

    0x00 前言 VueJS 社区里面关于富文本编辑器的集成也不少了,但是之前小调研了一下,基本上就是 quill,medium-editor,因为之前用 AngularJS 用过 medium-editor,并且需要自定义某些按钮,而且最好还是选中弹出式的,所以就决定用 medium-editor. 社区里面 star 较多的就是这个了:vue-medium-editor,但是打开它官网,看了看文档,越看越别扭,来看看它用法: <!-- index.html --> <medium-ed

  • VUE长按事件需求详解

    在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求. 需求一:长按数字累加或者累减 HTML: <div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'> <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart=&

  • 使用vue实现点击按钮滑出面板的实现代码

    在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q

  • vue组件中点击按钮后修改输入框的状态实例代码

    最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>

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

    实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte

  • vue.js实现标签页切换效果

    第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样: 那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-router,vue-router是vue.j

  • vue.js父子组件通信动态绑定的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id='app'> <!--这里的作用是将父组件渲染到页面上--> <father></father> </d

  • vue.js提交按钮时进行简单的if判断表达式详解

    前言 本文主要介绍的是vue.js提交按钮时进行简单的if判断表达式的相关内容,分享出来供大家参考学习,是一个简单的业务需求,下面话不多说了,看图说话 1:当充值金额没有填写的时候,会有Toast小弹框提示"请输入有效的充值金额" if (!this.money) { console.log('money',money); Toast({ message: '请输入有效的充值金额', duration: 2000 }); } 2:当第二个框实收金额没有填写的时候,会有Toast小弹框提

  • Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • vue实现表格增删改查效果的实例代码

    整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

  • js编写当天简单日历效果【实现代码】

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

  • JS实现的另类手风琴效果网页内容切换代码

    本文实例讲述了JS实现的另类手风琴效果网页内容切换代码.分享给大家供大家参考.具体如下: 这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • Vue.js在数组中插入重复数据的实现代码

    1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index"的数组插入,数组不支持重复数据的插入 2.1  JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type=&q

随机推荐