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 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
Javascript组合继承方法代码实例解析
Apr 02 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进程通信基础之信号
2017/02/19 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python调用API实现智能回复机器人
2018/04/10 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
django如何实现视图重定向
2019/07/24 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Java基础面试题
2012/11/02 面试题
2014小学教师个人工作总结
2014/11/10 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
优秀创业计划书分享
2019/07/19 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫