您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue.js如何實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì),Vue中頁(yè)面使用的是局部刷新,不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問(wèn)速度和用戶體驗(yàn)。
實(shí)現(xiàn)效果:
實(shí)現(xiàn)代碼以及注釋:
<!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"> <!--導(dǎo)航欄菜單會(huì)得到處于active的變量的值作為一個(gè)class --> <!-- 為了防止當(dāng)我們點(diǎn)擊鏈接時(shí)頁(yè)面發(fā)生跳轉(zhuǎn),我們使用prevent優(yōu)化 --> <nav v-bind:class="active" v-on:click.prevent> <!-- 當(dāng)一個(gè)菜單中的鏈接被點(diǎn)擊,我們調(diào)用定義在javaScript vue中的makeActive方法 --> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="home" v-on:click="makeActive('home')">Home</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="projects" v-on:click="makeActive('projects')">Projects</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="services" v-on:click="makeActive('services')">Services</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="contact" v-on:click="makeActive('contact')">Contact</a> </nav> <!-- mustache表達(dá)式將被active的值替換,它將發(fā)生任何變化它都將會(huì)自動(dòng)更新--> <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"> // 創(chuàng)建一個(gè)Vue示例,并且傳遞一個(gè)可選對(duì)象 var demo = new Vue({ // 一個(gè)DOM元素表示我們的view模型 el: '#main', // 定義屬性值,給定初始化值 data: { active: 'home' }, // 我們需要使用到的函數(shù) methods: { makeActive: function(item){ // 當(dāng)一個(gè)model發(fā)生變化,view會(huì)自動(dòng)更新 this.active = item; } } }); </script> </body> </html>
以上是“Vue.js如何實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。