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

<div id='main'> <!-- 激活的菜單樣式為 active 類 --> <!-- 為了阻止鏈接在點(diǎn)擊時(shí)跳轉(zhuǎn)，我們使用了 'prevent' 修飾符 (preventDefault 的簡(jiǎn)稱)。 --> <nav v-bind: v-on:click.prevent> <!-- 當(dāng)菜單上的鏈接被點(diǎn)擊時(shí)，我們調(diào)用了 makeActive 方法, 該方法在 Vue 實(shí)例中創(chuàng)建。 --> <a href='http://m.b3g6.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='makeActive(’home’)'>Home</a> <a href='http://m.b3g6.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='makeActive(’projects’)'>Projects</a> <a href='http://m.b3g6.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='makeActive(’services’)'>Services</a> <a href='http://m.b3g6.com/bcjs/11364.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' 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>

效果如下：

編輯文本實(shí)例

<!-- v-cloak 隱藏未編譯的變量，直到 Vue 實(shí)例準(zhǔn)備就緒。 --><!-- 元素點(diǎn)擊后 hideTooltp() 方法被調(diào)用 --> <div v-cloak v-on:click='hideTooltip'> <!-- 這是一個(gè)提示框 v-on:click.stop 是一個(gè)點(diǎn)擊事件處理器，stop 修飾符用于阻止事件傳遞 v-if 用來(lái)判斷 show_tooltip 為 true 時(shí)才顯示 --> <div v-on:click.stop v-if='show_tooltip'> <!-- v-model 綁定了文本域的內(nèi)容 在文本域內(nèi)容改變時(shí)，對(duì)應(yīng)的變量也會(huì)實(shí)時(shí)改變 --> <input type='text' v-model='text_content' /> </div> <!-- 點(diǎn)擊后調(diào)用 'toggleTooltip' 方法并阻止事件傳遞 --> <!-- 'text_content' 變量根據(jù)文本域內(nèi)容的變化而變化 --> <p v-on:click.stop='toggleTooltip'>{{text_content}}</p> </div> <script>var demo = new Vue({ el: ’#main’, data: { show_tooltip: false, text_content: ’點(diǎn)我，并編輯內(nèi)容。’ }, methods: { hideTooltip: function(){ // 在模型改變時(shí)，視圖也會(huì)自動(dòng)更新 this.show_tooltip = false; }, toggleTooltip: function(){ this.show_tooltip = !this.show_tooltip; } }})</script>

效果如下：

以上就是vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于vue 導(dǎo)航菜單 編輯文本的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！