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="#" class="home" v-on:click="makeActive('home')">Home</a>

		<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>

		<a href="#" class="services" v-on:click="makeActive('services')">Services</a>

		<a href="#" 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实现按钮的动态绑定的更多相关文章

  1. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  2. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  4. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  5. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  6. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  7. 前端——Vue.js学习总结一

    一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...

  8. 偏前端-vue.js学习之路初级（一）概念

    首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时.    新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...

  9. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

随机推荐

  1. 160503、onunload、onbeforeunload事件详解

    最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...

  2. 在nginx启动后，如果我们要操作nginx，要怎么做呢 别增加无谓的上下文切换 异步非阻塞的方式来处理请求 worker的个数为cpu的核数 红黑树

    nginx平台初探(100%) — Nginx开发从入门到精通 http://ten 众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么nginx究竟是怎么样的呢?这一节我们先来 ...

  3. UNION WHERE

    w条件语句的作用域. SELECT * FROM ( SELECT asin, LOWER(country) AS country FROM grab_amzreviews_asins UNION D ...

  4. 使用JCONSOLE远程监控JVM

    启动JMS服务 JConsole是从Java 5中开始引入的一个用于对JVM性能和资源消耗进行监控的图形化工具.JConsole可以连接本地的Java程序,也可以连接远程的Java程序.由于是GUI的 ...

  5. docker+MySQL+读写分离

    一.拉取mysql镜像文件docker pull mysql二.查看镜像docker images三.创建配置文件目录mkdir /data/docker/mysql/{master,slave} - ...

  6. #运算符、不同的指针类型、数组和指针、指针运算、堆、栈、静态区、只读区、下标VS指针

    #运算符:用于在预编译期将宏参数转换为字符串 #define CONVERS(x)  #x   //注:没用双引号包括. 不同类型的指针占用的内存空间大小相同. 局部变量 定义: a[5]; 打印a[ ...

  7. PAT 1136 A Delayed Palindrome[简单]

    1136 A Delayed Palindrome (20 分) Consider a positive integer N written in standard notation with k+1 ...

  8. STL vector 内存释放

    最近在论坛看到一个提问帖子,问题是vector中存储了对象的指针,调用clear后这些指针如何删除? class Test { public: Test() {} ~Test() { cout < ...

  9. Java中Map用法详解

    原文地址http://blog.csdn.net/guomutian911/article/details/45771621 原文地址http://blog.csdn.net/sunny2437885 ...

  10. 成员函数查找[条款24]---《C++必知必会》

    调用一个成员函数,涉及三个步骤:第一步,编译器查找函数的名字:第二部,从可用候选者中选择最佳匹配函数:第三步,检查是否具有访问该函数的权限. #include<iostream> usin ...