vue-computed

computed、watch、method实现数据监听

by li gang

HTML

<header>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
</header>
<<body>
  <div id="app">
    <input type="text" v-model="message">
    <p>{{computedMsg}}</p>
    <p>{{methodMsg()}}</p>
    <p>{{watchMsg}}</p>
  </div>
</body>

JavaScript

const app = new Vue({
	el: '#app',
  data() {
  	return {
    	message: '',
      watchMsg: ''
    }
  },
  computed: {
  	computedMsg() {
    	return this.message.toUpperCase();
    }
  },
  methods: {
  	methodMsg() {
    	return this.message.toUpperCase();
    }
  },
  watch: {
  	message() {
    	return  this.watchMsg = this.message.toUpperCase();
    }
  }
});