wiput1999/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
      <br />
      {{ reversedMessage }}
      <div @click="setText" v-if="show" v-bind:class="activeClass">
        Show if show is true
      </div>
      <div v-else>Show if show is false</div>
      <text-area v-bind:hello="112"></text-area>
      <input type="text" v-model.lazy="name" />
      <a v-bind:href="url" v-bind:style="fontSizeComputed">Facebook</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
    <script>
      Vue.component('text-area', {
        props: ['hello'],
        template: '<p>{{hello}}</p>'
      })

      let app = new Vue({
        el: '#app',
        data: {
          activeClass: 'active',
          name: '',
          url: 'https://fb.com/wiput.pootong',
          message: 'Hello Vue!',
          show: true,
          object: {message: 'lel'},
          isActive: true
        },
        methods: {
          setText: function() {
            this.message = 'Prayuth'
          }
        },
        watch: {
          name: function() {
            this.message = 'asdfg'
          }
        },
        computed: {
          fontSizeComputed: function() {
            return {
              color: 'red',
              fontSize: 13 + this.name.length + 'px'
            }
          },
          reversedMessage: function() {
            return this.name
              .split('')
              .reverse()
              .join('')
          }
        }
      })
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Vue</title>
	</head>
	<body>
	<div id="app">
	{{ message }}
	<br />
	{{ reversedMessage }}
	<div @click="setText" v-if="show" v-bind:class="activeClass">
	Show if show is true
	</div>
	<div v-else>Show if show is false</div>
	<text-area v-bind:hello="112"></text-area>
	<input type="text" v-model.lazy="name" />
	<a v-bind:href="url" v-bind:style="fontSizeComputed">Facebook</a>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
	<script>
	Vue.component('text-area', {
	props: ['hello'],
	template: '<p>{{hello}}</p>'
	})

	let app = new Vue({
	el: '#app',
	data: {
	activeClass: 'active',
	name: '',
	url: 'https://fb.com/wiput.pootong',
	message: 'Hello Vue!',
	show: true,
	object: {message: 'lel'},
	isActive: true
	},
	methods: {
	setText: function() {
	this.message = 'Prayuth'
	}
	},
	watch: {
	name: function() {
	this.message = 'asdfg'
	}
	},
	computed: {
	fontSizeComputed: function() {
	return {
	color: 'red',
	fontSize: 13 + this.name.length + 'px'
	}
	},
	reversedMessage: function() {
	return this.name
	.split('')
	.reverse()
	.join('')
	}
	}
	})
	</script>
	</body>
	</html>