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. Android开源天气预报应用Weather-Lite

    由于最近繁忙的工作告一段落,要清闲一段时间,所以可以好好利用这段时间给自己充充电. 于是乎这个app就诞生了.本着开源的精神我把它放在了github上.这里如果有Android初学者的话不妨学习一下, ...

  2. QBC检索和本地SQL检索

    细说QBC:QBC(Query By Criteria) 查询:这种方式比较面向对象方式,因为是面向对象,所以查询时参数名就是所查询的类的属性名并不是数据库的表的列名重点是有三个描述条件的对象:Res ...

  3. css如何引入外部字体？

    第一步,在CSS中引入字体并给名字取一个合适的名字,如下 1 2 3 4 5 6 7 @font-face {     /* font-properties */     font-family: p ...

  4. 小程序 当button遇上Flex布局

    当需要将button按行排列,当超过一行时,可以换行,从左到右排列,想实现如下效果(实现的比较粗糙,能说明问题就行,呵~~~): 使用Flex布局,在设置主轴方向上对齐方式,使用justify-con ...

  5. okhttp发送post请求

    String url = "http://www.xxx.com/api/test"; OkHttpClient httpClient = new OkHttpClient(); ...

  6. Apache mahout 源码阅读笔记-DataModel之UserBaseRecommender

    先来看一下使用流程: 1)拿到DataModel 2)定义相似度计算模型 PearsonCorrelationSimilarity 3)定义用户邻域计算模型 NearestNUserNeighborh ...

  7. Linux上安装pip以及setuptools

    毕竟丰富的第三方库是python的优势所在,为了更加方便的安装第三方库,使用pip命令,我们需要进行相应的安装. 1.安装pip前需要前置安装setuptools 命令如下: wget --no-ch ...

  8. JavaWeb-Servlet开发2

    ---恢复内容开始--- ServletConfig 配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servle ...

  9. C# 预定义语言

    官网: https://msdn.microsoft.com/zh-cn/library/88td0y52.aspx [Conditional("DEBUG")] 作为预处理中的一 ...

  10. python全栈开发从入门到放弃之socket并发编程多线程GIL

    一 介绍 ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nati ...