vue.jsのサンプル

CDNで公開されているライブラリを使用したvueのサンプル
以下のhtmlをローカルに保存して開くと動作します。
※CDN接続なのでインターネットに接続必要があり

<!--★デザインの定義★-->

<style>
#app-hoge .error {
color: red;
}
</style>
<div id="app-hoge">
　入力した値が奇数か偶数かを返します<br>
<input type="text" v-model="message">
<div class="error" v-if="error.require">必須項目です。</div>
<div class="error" v-if="error.kisuu">奇数</div>
<div class="error" v-if="error.guusuu">偶数</div>
</div>

<!--★vueライブラリの参照★-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!--★スクリプトの記述★-->
<script>
var rtnVal = new Vue({
el: '#app-hoge',
watch: {
message: function(newVal, oldVal) {
this.error.require = (newVal.length < 1) ? true : false;
this.error.kisuu = (newVal % 2 == 1 ) ? true : false;
this.error.guusuu = (newVal % 2 == 0 ) ? true : false;
}
},
data: {
message: '0',
error: {
require: false,
kisuu: false,
guusuu: false
}
}
})
</script>