【前端】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>

转载于:https://www.cnblogs.com/dragonir/p/7403611.html

【前端】vue.js实现按钮的动态绑定相关推荐

Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
前端Vue.js框架是什么？有哪些特点？
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
菜鸟学习----前端vue.js学习01
菜鸟学习----前端vue.js学习01 项目使用vue.js脚手架,构建项目 1.vue.js构建登录框登录框架构使用element ui Tabs 标签页,构建基础样式.用户登录,二维码查询,编 ...
前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
前端Vue分享菜单按钮弹框.微博分享.QQ分享.微信好友.朋友圈 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13085 效 ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
三十、开始前端Vue.js的学习之路
@Author:Runsen @Date:2019/08/07 @modified Date:2019/08/07 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼 ...
axios 上传文件_聚是一团火散作满天星，前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传...
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...

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

【前端】vue.js实现按钮的动态绑定相关推荐

最新文章

热门文章