初めに

はやりに乗っかってみました
これで湯屋から契約作業のwebページ作成案件が来ても安心です

湯婆婆コード

VueCLI version2.6.12を使用しています
設定はデフォルトです

yubaba.vue


<template>
  <div class="yubaba">
    <div>契約書だ。そこに名前を書きな！</div>
    <input type="text" v-model="name"><br><br>
    <button v-on:click="outputName(),createNewName()" id="keiyakubtn">契約する</button>
    <div>{{displayName}}</div><br>
    <div>{{newName}}</div>
    <div v-if="!name">{{allClear()}}</div>
    <button v-on:click="contractCancellation">契約を破棄する</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: '',
      displayName:'',
      newName: '',
      setTimeID: '',
    };
  },
  methods: {
    outputName() {
      if (!this.name) {
        // フォームが空白だったらアラートを表示する
        alert('名前を書きな!!')
      } else if (this.name) {
        // フォームに入力された文字列を表示する
        this.displayName = 'ふん。「'+this.name+'」っていうのかい。贅沢な名前だねぇ'
      }
    },
    createNewName() {
      // this.newName = this.name.substring(0,1)
      // 取得した文字列を配列に変換
      const displayNameArray = this.name.split('')
      // 取得した配列を表示
      // clearTimeout(this.setTimeID)
      this.setTimeID = setTimeout(() => {
        const randomName = displayNameArray[Math.floor(Math.random() * this.name.length)]
        this.newName = 'お前の名前は「'+randomName +'」だよ。いいかい「'+randomName+'」だよ。わかったら返事をするんだ！！'
      },3000)
    },
    allClear() {
      // フォームから要素が消えたら
      if (!this.name) {
        // すべてを空白にする
        this.displayName = ''
        this.newName = ''
      }
    },
    contractCancellation() {
      alert('契約破棄')
      this.name = '';
      this.displayName = ''
      this.newName = ''
      for(let i = 0; i < 1000; i++) {
        document.write('　　わたしゃ残念だよ　　')
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#keiyakubtn {
  background-color: red;
  color: white;
  width: 4cm;
  height: 4cm;
}
</style>

実行画面

ちょっとした説明

以下使用した変数たちです

name: '',
displayName:'',
newName: '',
setTimeID: '',

契約書ページ

以下のHTMLコードはただ単にボタンやフォームの表示、スクリプトの呼び出しなどしています。

<template>
  <div class="yubaba">
    <div>契約書だ。そこに名前を書きな！</div>
    <input type="text" v-model="name"><br><br>
    <button v-on:click="outputName(),createNewName()" id="keiyakubtn">契約する</button>
    <div>{{displayName}}</div><br>
    <div>{{newName}}</div>
    <div v-if="!name">{{allClear()}}</div>
    <button v-on:click="contractCancellation">契約を破棄する</button>
  </div>
</template>

契約処理の実装

以下のコードでは、なんちゃって空白処理と奪われる前の名前表示を実装をしています。
名前が入力されなかったらアラートを表示します。
名前を入力したら湯屋の一員として一歩前進できます！

    outputName() {
      if (!this.name) {
        // フォームが空白だったらアラートを表示する
        alert('名前を書きな!!')
      } else if (this.name) {
        // フォームに入力された文字列を表示する
        this.displayName = 'ふん。「'+this.name+'」っていうのかい。贅沢な名前だねぇ'
      }

名前を奪われます

以下のコードでは名前を奪う処理を実装しました。
入力された名前を配列形式に変換してからからランダムで一文字選びそれを新しい名前にします。

 createNewName() {
      // 取得した文字列を配列に変換
      const displayNameArray = this.name.split('')
      // 取得した配列を表示
      this.setTimeID = setTimeout(() => {
        const randomName = displayNameArray[Math.floor(Math.random() * this.name.length)]
        this.newName = 'お前の名前は「'+randomName +'」だよ。いいかい「'+randomName+'」だよ。わかったら返事をするんだ！！'
      },3000)
    }

見たまんまです。フォームが空白になると要素が消えます。
作成した理由はとくにありませんw

allClear() {
      // フォームから要素が消えたら
      if (!this.name) {
        // すべてを空白にする
        this.displayName = ''
        this.newName = ''
      }
    }

おばばのやさしさ

湯婆婆からの救済処置です。
契約破棄ボタンのスクリプトです。
破棄したら怖いことになります。

contractCancellation() {
      alert('契約破棄')
      this.name = '';
      this.displayName = ''
      this.newName = ''
      for(let i = 0; i < 1000; i++) {
        document.write('　　わたしゃ残念だよ　　')
      }
    }
  }

説明なんてなかったんや...

最後に

今回初めての投稿です。目を通してくれた方がいましたらとてもうれしいです。
ブログ的なもの自体初めての経験なのでとても読みにくいと思います。
勉強中なのでご容赦いただきたいです。。。
気が向いたらこれからも、はやりに乗っかってみたり、自分でネタ的なものを書こうかなとおもいます
趣味でコーディングの勉強をしている学生なのでいろいろと適当です。
添削やコメントなど頂けましたら喜びます。
拙い文章でしたが最後まで見ていただきありがとうございました。

vue.jsで湯婆婆を実装してみた（はやりに乗っかてみた）

初めに