ここから本文です

Vue.jsについて質問です。 0~10までカウントしたら、「もっと押してください」 1...

アバター

ID非公開さん

2019/10/2018:20:28

Vue.jsについて質問です。
0~10までカウントしたら、「もっと押してください」
11~20までカウントしたら、「あと少しです」
など、メッセージを出す方法を教えてください。

コードは以下で、ボタンでカウントができるようになっています。

[HTML]
<div id = app><p>{{ count }}回</p>
<button v-on:click="countup">カウント</button>
</div>

[js]
<script>
new Vue ({
el: "#app",
data: {
count: 0
},
methods:{
countup: function(){
this.count++;
}
}
})
</script>

閲覧数:
31
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2019/10/2118:49:18

その後の何をするのかということもわかりませんし
書き方の良し悪しもわかりませんが
一応次のようにすればできますけどね。



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
<p>{{ count }}回</p>
<p>{{ message }}</p>
<button v-on:click="countup">カウント</button>
</div>

<script>
new Vue ({
    el: "#app",
    data: {
        count: 0,
        message: ""
    },
    methods:{
        countup: function(){
            this.count++;
            this.showMessage();
        },
        showMessage: function(){
            this.message = [
                "もっと押してください",
                "あと少しです"
            ][((this.count-1)/10)^0] || "成功しました";
        }
    },
    mounted: function(){
        window.addEventListener("load", this.showMessage)
    },
    destroyed: function(){
        window.removeEventListener("load", this.showMessage)
    }
})
</script>

</body>
</html>



もっとも

        showMessage: function(){
            this.message = [
                "もっと押してください",
                "あと少しです"
            ][((this.count-1)/10)^0] || "成功しました";
        }

この部分↑は
次のよう↓にしても良いと思います。

        showMessage: function(){
            if(this.count <= 10){
                this.message = "もっと押してください";
            }else if(this.count <= 20){
                this.message = "あと少しです";
            }else{
                this.message = "成功しました";
            }
        }

そもそも私は if文(や switch文) が嫌いですし
それに加えて文がさらに長くなる可能性を考えれば
上の方が良いかと思ってそういう書き方をしているだけです。

この回答は投票によってベストアンサーに選ばれました!

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる