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. Zabbix监控介绍及安装配置

    什么是zabbix zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...

  2. HDU 5701 中位数计数 百度之星初赛

    中位数计数 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Sub ...

  3. python常见模块之序列化（json与pickle以及shelve）

    什么是序列化? 我们把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flatte ...

  4. 0606-Zuul构建API Gateway-Zuul过滤器以及禁用Zuul过滤器

    一.概述 针对Spring Cloud的Zuul配备了许多在代理和服务器模式下默认启用的ZuulFilter bean. 有关启用的可能过滤器,请参阅zuul过滤器包. 二.Zuul过滤器使用 2.1 ...

  5. java-mybaits-00503-延迟加载

    1.什么是延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...

  6. php使用amqplib方式使用rabbitmq

    安装 sudo apt-get install php sudo apt-get install rabbitmq-server sudo apt-get install php-bcmath php ...

  7. Python函数参数*args和**kwargs

    1. Python中使用*args和**kwargs #!/usr/bin/env python3 # coding: utf-8 # File: args_kwargs_demo.py # Auth ...

  8. Mac使用操作

    快捷键退出程序:Command + Q 快捷键关闭窗口:Command + W(关闭程序的窗口不一定是退出程序) 单击左上角黑苹果,菜单里面有强制退出 Finder菜单的偏好设置,高级设置菜单里面可以 ...

  9. SQL Server WITH ROLLUP、WITH CUBE、GROUPING语句的应用

    CUBE:CUBE 生成的结果集显示了所选列中值的所有组合的聚合. ROLLUP:ROLLUP 生成的结果集显示了所选列中值的某一层次结构的聚合. GROUPING:当行由 CUBE 或 ROLLUP ...

  10. HDU 1114 Piggy-Bank(完全背包模板题)

    完全背包模板题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std ...