vue實現導航選單和編輯文字的示例程式碼
阿新 • • 發佈:2020-07-07
導航選單例項
<div id="main"> <!-- 啟用的選單樣式為 active 類 --> <!-- 為了阻止連結在點選時跳轉,我們使用了 "prevent" 修飾符 (preventDefault 的簡稱)。 --> <nav v-bind:class="active" v-on:click.prevent> <!-- 當選單上的連結被點選時,我們呼叫了 makeActive 方法,該方法在 Vue 例項中建立。 --> <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" 變數會根據當前選中的值來自動變換 --> <p>您選擇了 {{active}} 選單</p> </div> <script> // 建立一個新的 Vue 例項 var demo = new Vue({ // DOM 元素,掛載檢視模型 el: '#main',// 定義屬性,並設定初始值 data: { active: 'home' },// 點選選單使用的函式 methods: { makeActive: function(item){ // 模型改變,檢視會自動更新 this.active = item; } } }); </script>
效果如下:
編輯文字例項
<!-- v-cloak 隱藏未編譯的變數,直到 Vue 例項準備就緒。 --> <!-- 元素點選後 hideTooltp() 方法被呼叫 --> <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 綁定了文字域的內容 在文字域內容改變時,對應的變數也會實時改變 --> <input type="text" v-model="text_content" /> </div> <!-- 點選後呼叫 "toggleTooltip" 方法並阻止事件傳遞 --> <!-- "text_content" 變數根據文字域內容的變化而變化 --> <p v-on:click.stop="toggleTooltip">{{text_content}}</p> </div> <script> var demo = new Vue({ el: '#main',data: { show_tooltip: false,text_content: '點我,並編輯內容。' },methods: { hideTooltip: function(){ // 在模型改變時,檢視也會自動更新 this.show_tooltip = false; },toggleTooltip: function(){ this.show_tooltip = !this.show_tooltip; } } }) </script>
效果如下:
以上就是vue實現導航選單和編輯文字的示例程式碼的詳細內容,更多關於vue 導航選單 編輯文字的資料請關注我們其它相關文章!