ホームページ > ウェブフロントエンド > jsチュートリアル > CSSとJSの読み込みと実行(コード付き)

CSSとJSの読み込みと実行(コード付き)

不言
リリース: 2019-03-15 14:05:13
転載
2012 人が閲覧しました

この記事は css と js の読み込みと実行 (コード付き) に関する内容であり、一定の参考価値があります。困っている友人は参考にしていただければ幸いです。

要件

ルート /news があり、/login はキーボード イベントをリッスンし、関係なく /news ページ内でのみ有効であることが許可されていると仮定します。後でどのページにジャンプしても、トリガーされません。 対応するキーボード イベントは、/news でのみトリガーできます。

問題

/news に入る前に、次のキーを押します。キーボードはイベントをトリガーしません。/news を入力した後、キーボードのキーを押すかどうかに関係なく、別のページにジャンプしてキーボードのキーを押すと、イベントがトリガーされます

Code

srcviewsnews.vue

<template>
  <div>
    news
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true, //底部图片列表显示隐藏
      name: "aa"
    };
  },
  methods: {
    keyLeft() {
      alert(this.name);
    },
    keyUp() {
      alert("向上方向键");
    },
    keyRight() {
      alert("向右方向键");
    },
    keyDown() {
      alert("向下方向键");
    },
    keys() {
      var that = this;
      document.onkeydown = function(e) {
        let key = window.event.keyCode;
        if (key == 37) {
          that.keyLeft();
        } else if (key == 38) {
          that.keyUp();
          return false; //有上下滚动条的时候,不向上滚动
        } else if (key == 39) {
          that.keyRight();
        } else if (key == 40) {
          that.keyDown();
          return false; //有上下滚动条的时候,不向上滚动
        }
      };
    }
  },
  created() {
    if (this.flag == true && this.$route.path == "/news") {
      this.keys();
    }
  },
  mounted() {}
};
</script>
ログイン後にコピー

以上がCSSとJSの読み込みと実行(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート