前端vue.js实现按钮的动态绑定

Posted 2020-10-03 Dragonir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端vue.js实现按钮的动态绑定相关的知识，希望对你有一定的参考价值。

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实现按钮的动态绑定的主要内容，如果未能解决你的问题，请参考以下文章

vue.js-动态绑定class 利用index实现导航

具有单选按钮动态列表的 Vue.js v-model