Vueを使いフォームに入力された文字列を判定し表示を切り替えたい

Question

宜しくお願い致します。

v-bindを使い、フォームに入力された文字列を判定し表示を切り変えることを考えております。

動作の流れ
１、pは始めは非表示にしておく
２、フォームに入力された文字をindexOfで判定し、全て一致（パスワードはapple）した場合、pを表示させる

おそらくcomputedあたりを使えば実現できるのではと考えていますが、
どのように記載をすれば、showをtrueに変更できるかがわかりません。

HTML

<div id="app">

<input type="text" v-model="msg">

<div v-show="show">
	<p>消す予定の文字</p>
</div>

JS

var vm = new Vue({
  el: '#app',
  data: {
	msg: '',
	show: false,
  },
  computed: {
   msg: function () {
	   if (this.msg.indexOf('apple') !== -1) {
	    return show = true;
	   }

	}
  }
})

Answer 1

こんなかんじでしょうか。

<div id="app">
  <!--@keyupでキーが持ち上がったらつど関数で判断します-->
  <input type="text" v-model="msg" @input="checkPass">
  <div v-show="show">
    <p>消す予定の文字</p>
  </div>
</div>

var vm = new Vue({
  el: "#app",
  data: {
    msg: "",
    show: false
  },
  methods: {
    checkPass: function() {
      this.show = this.msg === "apple"
    }
  }
});

Comments

[tomato01]

ご回答ありがとうございます！

意図した動作ができました！ありがとうございました。

尚、下記の方法でも思った動きができましたので参考としてお伝え致します。

<input type="text" v-model="msg">

<template v-if="this.msg.indexOf('apple') !== -1">
<p>消す予定の文字</p>
</template>

[satoshi_tajima]

すいません。今修正しましたが、@keyupだと日本語入力されて変換するのに対応できないので、@inputの方が適切です。

[tomato01]

ご連絡ありがとうございます。

@inputで行うのですね。承知しました。ありがとうございました！

Answer 2

computedを使ってもいけますね。

    <div id="app">
      <input type="text" v-model="msg">

      <div v-show="isValidPassword">
         <p>消す予定の文字</p>
      </div>
    </div>

new Vue({
  el: "#app",
  data: {
    msg: '',
  },
  computed: {
    isValidPassword: function() {
      return this.msg === 'apple'
    },
  },
})