はじめに Vue.jsでv-onディレクティブで遊んでみた。 使い方のイメージをしながらコードを書く。 今回使ったイベント修飾子 .once .prevent .once １回だけハンドラを呼び出す。その後は反応しなくなる .prevent 意図しない画面遷移、画面更新を避けるために使う。 See the Pen Vue.js v-on:click2 by morioka (@rm5912) on CodePen. 左のボタンはずっと反転しますが、右のボタンは一度反転すると反応しなくなります。 下のリンクは左も右もGoole.comにリンクを貼っていますが、 右は押しても機能しません。左はCodepenから飛べないのでエラーになりますが。。。。 最後に v-on:clickは省略して@clickでも、アプリケーションの中では揃えましょう。 <button @click="reverseMessage">メッセージ反転</button> <button @click.once="reverseMessage">一度だけ反転</button> 参考サイト [メモ]Vue.jsイベント修飾子一覧(Qiita)

複雑な家庭の事情により、iframeでpdfを表示する際にツールバーを非表示にする必要があったためメモ。 やりたいこと ブラウザでPDFを開くときに表示される、ダウンロードボタンや印刷ボタンの表示領域を非表示にしたい。 PDF本体を表示する領域が狭くなってよろしくないとか、ダウンロードできないようにしたいとか、印刷させたくないとか、いろいろな理由でこいつを消したいと思うことがあると思います。 やったこと iframeでsourceを指定する際のurlに#toolbar=0&navpanes=0をつけるだけ <iframe src="https://hogehoge.test/test.pdf#toolbar=0&navpanes=0'"> みたいな。 他の方法としてはiframeに"preview"というidをつけて、previewAreaというクラスを付与して、cssで非表示にするみたいなのもありらしいです。 <script> mounted(){ const preview = document.getElementById('preview') const item = preview.contentWindow.document.querySelector('#toolbar') item.classList.add('previewArea') } </script> <style lang="scss" scoped> .previewArea { #toolbar { display: none; } } </style> あとはpdf.jsをつかってがんばったり色々あると思いますが、ライトにやるなら今回のやりかたでいいんじゃないかと。 参考文献