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分布式监控 acknowledges 当出现报错的时候记录 查看着张表记录了一个事件 actions 动作 自动发现 问题告警 恢复告警 自动注册 alerts 报警信息 同web ...

  2. Pulsar

    The Apache Software Foundation Announces Apache® Pulsar™ as a Top-Level Project : The Apache Softwar ...

  3. timepicker php strtotime 8hours

    https://jqueryui.com/datepicker/ w timepicker datepicker 日期 时间 选择器 <script src="static/jquer ...

  4. [LeetCode] 7.Reverse Integer - Swift

    Reverse digits of an integer. Example1: x = , return Example2: x = -, return - 题目意思:对一个整型进行反转 实现代码: ...

  5. Python 3.5 中的异步HTTP请求写法

    Python 3.5 增加了对async def and await的支持,同样的异步代码看起来干净了很多,也更易读. import aiohttp import asyncio async def ...

  6. python基础-第十篇-10.2CSS基础

    CSS是Cascading Style Sheet的简称,中文为层叠样式表 属性和属性值用冒号隔开,以分号结尾 引入方式 行内式--在标签的style属性中设定CSS样式 <body> & ...

  7. JMeter场景运行（非GUI方式运行命令）

    JMeter场景运行方式可分为两种:  GUI方式运行,视窗运行,双击jmeter.bat启动运行即可以看到运行界面:  非GUI方式运行,在命令窗口中使用java –jar命名运行: 但不管是以 ...

  8. 【keras框架】

    更高级别的封装.更简单的api,以tensorflow.theano为后端,支持更多的平台 读取网络模型后生成网络结构图 读取 from keras.models import load_model ...

  9. (转)Unity3d的3种截图方法

    下面是我总结的.在u3d中的,三种截屏方法: 1.使用Application类下的CaptureScreenshot方法. void CaptureScreen() { Application.Cap ...

  10. Loki之ThreadPool

    Loki中的ThreadPool目的主要是对创建出来的线程进行复用. ThreadPool在Test而非Loki目录下,因此并非是标准Loki的组件之一,不过我们可以对其修改定制, 下面是对其源码的大 ...