二つの値を監視して一つの部品に反映するの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
<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>
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
Author And Source
この問題について(二つの値を監視して一つの部品に反映するのSampleです。), 我々は、より多くの情報をここで見つけました https://qiita.com/sachiko-kame/items/f7b1abe31b67023e67c3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .