Posted at

二つの値を監視して一つの部品に反映するの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クラスをつけています。

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の時に押せるようにしたいため。

メソッドを足してそれようのもの作っても大丈夫です。

"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