This section introduces several Vue.js examples to help you consolidate the knowledge you've learned through practice.
### Navigation Menu Example
## Navigation Menu
Create a simple navigation menu:
You selected {{active}} menu
// Create a new Vue instance var demo = new Vue({ // DOM element, mount the view model el: '#main', // Define properties and set initial values data: { active: 'home' }, // Function used when clicking the menu methods: { makeActive: function(item){ // When the model changes, the view updates automatically this.active = item; } } });
[Try it »](#)
### Edit Text Example
## Text Editing
Click on the specified text to edit its content:
{{text_content}}
var demo = new Vue({ el: '#main', data: { show_tooltip: false, text_content: 'Click me and edit the content.' }, methods: { hideTooltip: function(){ // When the model changes, the view also updates automatically this.show_tooltip = false; }, toggleTooltip: function(){ this.show_tooltip = !this.show_tooltip; } } })
[Try it »](#)
### Order List Example
## Order List
Create an order list and calculate the total price:
Services
{{service.name}} {{service.price | currency}}
Total: {{total() | currency}}
// Custom filter "currency" Vue.filter('currency', function (value) { return '$' + value.toFixed(2); }); var demo = new Vue({ el: '#main', data: { // Define model properties // The view will loop through and output the array data services: [ { name: 'Web Development', price: 300, active:true },{ name: 'Design', price: 400, active:false },{ name: 'Integration', price: 250, active:false },{ name: 'Training', price: 220, active:false } ] }, methods: { toggleActive: function(s){ s.active = !s.active; }, total: function(){ var total = 0; this.services.forEach(function(s){ if (s.active){ total+= s.price; } }); return total; } } });
[Try it »](#)
### Search Page Example
## Search Page
Enter search content in the input box, and the list displays the configured items:
{{article.title}}
var demo = new Vue({ el: '#main', data: { searchString: "", // Data model, in a real environment you could fetch this via Ajax articles: [ { "title": "What You Need To Know About CSS Variables", "url": "", "image": "https://static.jyshare.com/images/icon/css.png" }, { "title": "Freebie: 4 Great Looking Pricing Tables", "url": "", "image": "https://static.jyshare.com/images/icon/html.png" }, { "title": "20 Interesting JavaScript and CSS Libraries for February 2016", "url": "", "image": "https://static.jyshare.com/images/icon/css3.png" }, { "title": "Quick Tip: The Easiest Way To Make Responsive Headers", "url": "", "image": "https://static.jyshare.com/images/icon/css3.png" }, { "title": "Learn SQL In 20 Minutes", "url": "", "image": "https://static.jyshare.com/images/icon/sql.png" }, { "title": "Creating Your First Desktop App With HTML, JS and Electron", "url": "", "image": "https://static.jyshare.com/images/icon/html.png" } ] }, computed: { // Computed property, matches the search filteredArticles: function () { var articles_array = this.articles, searchString = this.searchString; if(!searchString){ return articles_array; } searchString = searchString.trim().toLowerCase(); articles_array = articles_array.filter(function(item){ if(item.title.toLowerCase().indexOf(searchString) !== -1){ return item; } }) // Return the filtered data return articles_array;; } } });
[Try it »](#)
### Switch Layout Example
## Switch Layout
Click the buttons in the top right corner to switch between different page layouts:
YouTip