example 05 vuejs Intro (angular-reactjs-vuejs-quickstart-comparison)

by hasandag

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p v-bind:class="{updated: name != 'Max'}">{{ name }}</p>
  <p v-if="name != 'Max'">Name updated!</p>
  <button v-on:click="changeName">Change Name</button>
  <button v-on:click="addElement">New Element</button>
  <ul>
    <li v-for="element in elements" v-bind:id="'el'+ element" v-bind:style="{backgroundColor:getColor(element)}">Element {{element}}</li>
  </ul>
</div>
<div id="app2">
  <p>
    Second VueJS Instance
  </p>
  <p>
    {{ message}}
  </p>
</div>

<div class="username"> {{ username }} </div>
<div class="username"> {{ username }} </div>

CSS

.updated {
  color: white;
  background-color: yellow;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    name: 'Max',
    elements: []
  },
  methods: {
    changeName: function() {
      this.name = 'Anna';
    },
    addElement: function() {
      this.elements.push(this.elements.length + 1);
    },
    getColor(number) {
      return number % 2 == 0 ? 'green' : 'red';
    }
  }
});

new Vue({
  el: '#app2',
  data: {
    message: 'Hello there'
  }
});

new Vue({
  el: '.username',
  data: {
    username: 'My class'
  }
});