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

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

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

導航菜單實例

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

效果如下：

編輯文本實例

<!-- v-cloak 隱藏未編譯的變量，直到 Vue 實例準備就緒。 -->
<!-- 元素點擊后 hideTooltp() 方法被調(diào)用 -->
 
<div id="main" v-cloak v-on:click="hideTooltip">
 
 <!-- 這是一個提示框
   v-on:click.stop 是一個點擊事件處理器，stop 修飾符用于阻止事件傳遞
   v-if 用來判斷 show_tooltip 為 true 時才顯示 -->
 
 <div class="tooltip" v-on:click.stop v-if="show_tooltip">
 
  <!-- v-model 綁定了文本域的內(nèi)容
   在文本域內(nèi)容改變時，對應的變量也會實時改變 -->
 
  <input type="text" v-model="text_content" />
 </div>
 
 <!-- 點擊后調(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: '點我，并編輯內(nèi)容。'
 },
 methods: {
  hideTooltip: function(){
   // 在模型改變時，視圖也會自動更新
   this.show_tooltip = false;
  },
  toggleTooltip: function(){
   this.show_tooltip = !this.show_tooltip;
  }
 }
})
</script>

效果如下：