vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼

更新時(shí)間：2020年07月04日 16:05:44 作者：菜鳥教程

這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本功能的方法，文中示例代碼非常詳細(xì)，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下

導(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)前選中的值來自動(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 id="main" v-cloak v-on:click="hideTooltip">
 
 <!-- 這是一個(gè)提示框
   v-on:click.stop 是一個(gè)點(diǎn)擊事件處理器，stop 修飾符用于阻止事件傳遞
   v-if 用來判斷 show_tooltip 為 true 時(shí)才顯示 -->
 
 <div class="tooltip" 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>

效果如下：