Vueは画像切り替え効果を実現

この記事の例では、画像切り替え効果を実現するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1) v-if/v-show

どちらも要素を非表示にしたり表示したりするために使用できます。しかし、実装の原則は異なります。
v-if は、DOM ツリーから要素を削除したり追加したりすることで、要素を非表示にしたり表示したりする効果を実現します。
v-show は、要素の変位値を変更することで、要素を非表示にしたり表示したりする効果を実現します。

2) vバインド

v-bind は要素の属性値を変更できます。
この背景知識に基づいて、画像切り替えの例を実装してみましょう。

機能要件

1) 左のボタンをクリックすると前の写真が表示されます。写真が最初の写真の場合はボタンを非表示にします。
2) 右側のボタンをクリックすると次の写真が表示されます。写真が最後の場合はボタンを非表示にします。

実装コード

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8" />
        <title>画像切り替え効果</title>
        <スタイル>
            ＃テスト{
                位置: 絶対;
            }
            ＃左{
                位置: 絶対;
                上: 134px;
                zインデックス: 99;
                幅: 24px;
                高さ: 32px;
                背景色: 黒;
                色: 白;
                フォントサイズ: 24px;
                不透明度: 0.6;
                カーソル: ポインタ;
            }
            ＃右{
                位置: 絶対;
                右: 0;
                上: 134px;
                zインデックス: 99;
                幅: 24px;
                高さ: 32px;
                背景色: 黒;
                色: 白;
                フォントサイズ: 24px;
                不透明度: 0.6;
                カーソル: ポインタ;
            }
            画像{
                幅: 500ピクセル;
                高さ: 300px;
                
            }
            
        </スタイル>
    </head>
    <本文>
        <div id="テスト">
            <div id="left" @click = "changeleft" v-if="lefttt"> &lt; </div>
            <img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
            <div id="right" @click = "changeright" v-show="righttt"> &gt; </div>
           

        </div>
    </本文>
    <!-- 開発バージョン、便利なコマンドライン警告を含む -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
         
         var dated = new Vue({
             //マウントポイント el: "#test",
             //データ： {
                番号: 1,
                lefttt:false、
                正しい:本当です、
             },
             メソッド: {
                 チェンジレフト:関数(){
                    if(this.num <= 2){
                        this.lefttt=false;
                        数値 = 1;
                    }それ以外{
                        this.lefttt=true;
                        this.num--;
                    }
                    
                    this.righttt = true;
                 },
                 チェンジライト:関数(){
                    if(this.num >= 7){
                        this.righttt=false;
                        数値は 8 です。
                    }それ以外{
                        this.righttt = true;
                        this.num++;
                    }
                    
                    this.lefttt=true;
                    
                 }
             }
         });
    
    </スクリプト>
</html>