Vue 2.0 Hello World

by xu xiaofei

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <p>{{ computed_message }}</p>
  <button @click="foo()">
    click
  </button>
  <input v-model='name'>
  <ul>
    <li v-for="(item,index) in arr2" :key="index">{{item}}</li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    name: '',
    arr: ['tom', 'jack', 'mike', 'alice', 'alex', 'mark','result'],
  },
  computed: {
    computed_message: function() {
      return this.message + ' computed'
    },
    arr2: function() {
      var temp = [];
      console.log(this.name)
      this.arr.forEach(function(val) {
        console.log(this.name)
        if (val.includes(this.name)) {
          temp.push(val);
        }
      });
      return temp;
    }

  },
  watch: {
    message: function() {
      alert(this.message)
    }
  },
  methods: {
    foo() {
      this.message = 'Hello watch'
    }
  }
})