二つの値を監視して一つの部品に反映するのSampleです。

二つの値を監視して一つの部品に反映するのSampleです。
見たほうが早いと思おうのでgif載せます。
Onsen UIとVue.jsを使っています。

gif

行いたいと思っていたこと
・二つの入力がされたらボタンを押せるようにする。
・二つの入力がされたら、cssのクラスを適応する

code

App.vue

<template>
<v-ons-page>
  <p>
    <v-ons-input type="text" placeholder="ログインID" v-model="name"></v-ons-input>
  </p>
  <p>
    <v-ons-input type="password" placeholder="パスワード" v-model="passWord"></v-ons-input>
  </p>
  <div style="width:150px;" class="sample" v-bind:class="{ active: is_login }">!ログイン!</div>
  <v-ons-button v-bind:disabled="is_login != true">Tap</v-ons-button>
</v-ons-page>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      passWord: ''
    }
  },
  computed: {
    is_login() {
      return this.name !== '' && this.passWord !== ''
    }
  }
}
</script>

<style>
.sample {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

.active {
  background-color: red;
}
</style>

行っていることPoint部分

1

ここは最初からCSSの.sampleは指定しているけど、.activeクラスは入力によって切り替えるようにしています。
is_login()の内容がtrueで背景色を赤色にする.activeクラスをつけています。

.vue

class="sample" v-bind:class="{ active: is_login }"

computed: {
    is_login() {
      return this.name !== '' && this.passWord !== ''
    }
  }

<style>
.sample {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
.active {
  background-color: red;
}
</style>

2

v-bind:disabled="trueだと押せなくなる指定なので、
is_login != trueと調整した書き方にしているだけです。
is_loginがtrueの時に押せるようにしたいため。
メソッドを足してそれようのもの作っても大丈夫です。

.vue

"is_login != true"

参考

https://qiita.com/dia/items/33549274ba504846a523
https://jp.vuejs.org/v2/guide/computed.html
https://jp.vuejs.org/v2/guide/class-and-style.html