Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <work :context="'home'"></work>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.1/vue.js"></script>
</body>
</html>
 
        var work = {
        template: "<div :class='getClass()'>Work component</div>",
        mounted: function() {
​
        },
​
        props: ['context'],
​
        data: function() {
          return {
           item: {
             class: 'custom'
           }
          };
        },
​
        methods: {
          getClass: function() {
            return this.context === 'home' ? this.item.class : '';
          }
        }
    }
   
   // registering the component globally
   Vue.component('work', work);
​
   new Vue({
     el: '#app'
   });
​
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers