創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計(jì),西安網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:西安等地區(qū)。西安做網(wǎng)站價(jià)格咨詢:18982081108

小編給大家分享一下vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

導(dǎo)航菜單實(shí)例

<div id="main">
 
 <!-- 激活的菜單樣式為 active 類 -->
 <!-- 為了阻止鏈接在點(diǎn)擊時(shí)跳轉(zhuǎn)，我們使用了 "prevent" 修飾符 (preventDefault 的簡(jiǎn)稱)。 -->
 
 <nav v-bind:class="active" v-on:click.prevent>
 
  <!-- 當(dāng)菜單上的鏈接被點(diǎn)擊時(shí)，我們調(diào)用了 makeActive 方法, 該方法在 Vue 實(shí)例中創(chuàng)建。 -->
 
  <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>
 
  <!-- 以下 "active" 變量會(huì)根據(jù)當(dāng)前選中的值來(lái)自動(dòng)變換 -->
 
 <p>您選擇了 <b>{{active}} 菜單</b></p>
</div>
 
<script>
// 創(chuàng)建一個(gè)新的 Vue 實(shí)例
var demo = new Vue({
 // DOM 元素，掛載視圖模型
 el: '#main',
 
 // 定義屬性，并設(shè)置初始值
 data: {
  active: 'home'
 },
 
 // 點(diǎn)擊菜單使用的函數(shù)
 methods: {
  makeActive: function(item){
   // 模型改變，視圖會(huì)自動(dòng)更新
   this.active = item;
  }
 }
});
</script>

本文名稱：vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的方法-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://chinadenli.net/article40/dhpdeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、面包屑導(dǎo)航、虛擬主機(jī)、電子商務(wù)、App開(kāi)發(fā)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)