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. Centos7.2yum安装时候出现db5错误的解决办法

    Centos7.2使用yum安装软件是出现如此错误提示 解决办法 删除 /var/lib/rpm文件夹下面所有以__db开头的文件

  2. ubuntu squid 代理服务器安装配置

    安装: 下载安装包 http://pan.baidu.com/s/1mitvwpE 解压 tar -xzvf file.tar.gz 编译: 进入sbin目录  执行 ./configure --pr ...

  3. Ubuntu下编译C语言程序（同时给编译生成的文件命名）

    1.创建c文件 test.c touch test.c 2.编写test.c vim test.c #include "stdio.h" int main(){ printf(&q ...

  4. mysql IPv4 IPv6

    w如何通过一个mysql方法,而不是借助脚本判断?INET6_ATON(expr) https://dev.mysql.com/doc/refman/5.7/en/miscellaneous-func ...

  5. lsof,fuser,xargs,print0,cut,paste,cat,tac,rev,exec,{},双引号，单引号，‘（字符串中执行命令）

    cut用来从文本文件或标准输出中抽取数据列或者域,然后再用paste可以将这些数据粘贴起来形成相关文件. 粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同.paste将按行将不同文件行 ...

  6. 十个技巧迅速提升JQuery性能

    本文提供即刻提升你的脚本性能的十个步骤.不用担心,这并不是什么高深的技巧.人人皆可运用!这些技巧包括: 使用最新版本 合并.最小化脚本 用for替代each 用ID替代class选择器 给选择器指定前 ...

  7. Centos7下实现免密码登录

    一.生成密钥 [root@master ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to sa ...

  8. 源码包安装(Python mysql redis)

    一  源码包安装 (1)python3.6源码包安装 ./configure ------> 定制功能 make make install mysql 源码包 cmake make make i ...

  9. K-means聚类算法MATLAB

    以K-means算法为例,实现了如下功能 自动生成符合高斯分布的数据,函数名为gaussianSample.m 实现多次随机初始化聚类中心,以找到指定聚类数目的最优聚类.函数名myKmeans.m 自 ...

  10. 深度分析ORACLE热点块问题

    1.热点块的定义 数据库的热点块,从简单了讲,就是极短的时间内对 少量数据块进行了过于频繁的访问.定义看起来总是很简单的,但实际在数据库中,我们要去观察或者确定热点块的问题,却不是那么简单了.要深刻地 ...