大抵の場合、これで十分なんじゃないかとか思いました。
すべて正しく入力したらボタンが出てきます。
<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="text" v-model="name" placeholder="名前">
<input type="text" v-model="zipCode" placeholder="郵便番号">
<select v-model="prefecture" placeholder="都道府県">
<option value="0">-</option>
<option value="1">東京</option>
<option value="2">北海道</option>
</select>
<div v-if="validation">{{validation}}</div>
<div v-if="!validation">
<button>OK!</button>
</div>
</body>
</html>
new Vue({
el: 'body',
data: {
name: '',
zipCode: '',
prefecture: '0'
},
computed: {
validation: function() {
if (!this.name) {
return '名前は必須です';
}
if (!/[0-9]{7}/.test(this.zipCode)) {
return '郵便番号(7桁 ハイフン無し)で入力して下さい';
}
if (this.prefecture === '0') {
return '都道府県を選択して下さい';
}
return '';
}
}
});