微信小程序平台开发_Vue.js完成按钮的动态绑定效

2021-01-11 15:09 admin
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;
 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: v-on:click.prevent 
 !-- 当一个菜单中的链接被点击,我们调用定义在javaScript vue中的makeActive方法 -- 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="makeActive('home')" Home /a 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="makeActive('projects')" Projects /a 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="makeActive('services')" Services /a 
 a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="makeActive('contact')" Contact /a 
 /nav 
 !-- mustache表达式将被active的值替换,它将发生任何变化它都将会自动更新-- 
 p YOU SELECTED b {{active}} /b /p 
 /div 
 script src="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