前提・実現したいこと
metodsの使い方について疑問が出てきたので投稿させてください。
やりたかったことはマウスオーバー、マウスアウトで背景画像がチェンジするという簡単なシステムを作っていました。
まずはソースを記します。
※~~cssは本題と関係ないと思いますので、省きます。~~⇒追記しました。
該当のソースコード
html
1<script src="./js/vue.js"></script> 2<body> 3 4 <div class="wrap bg_jiyu" id="jiyu_bg"> 5 <div id="jiyu_area"> 6 <div class="inner"> 7 <ul class="bt_area"> 8 <li><a @mouseover="bgChenge($event)" @mouseout="bgAlways" value="cov01" href="javascript:void(0)">ボタンその1</a></li> 9 <li><a @mouseover="bgChenge($event)" @mouseout="bgAlways" value="cov02" href="javascript:void(0)">ボタンその2</a></li> 10 <li><a @mouseover="bgChenge($event)" @mouseout="bgAlways" value="cov03" href="javascript:void(0)">ボタンその3</a></li> 11 </ul> 12 </div> 13 </div> 14 <i class="cov_always"></i> 15 <transition name="fade"> 16 <i v-if="currentCheck('cov01')" class="cov01" key="cov01"></i> 17 <i v-if="currentCheck('cov02')" class="cov02" key="cov02"></i> 18 <i v-if="currentCheck('cov03')" class="cov03" key="cov03"></i> 19 </transition> 20 </div><!-- / .wrap --> 21 </div> 22 <!-- / .main-continer --> 23 <script> 24 let jiyu_bg = new Vue({ 25 el: '#jiyu_bg', 26 data: function () { 27 return { 28 msg: '', 29 currentBg: null 30 } 31 }, 32 methods: { 33 bgChenge: function (event) { 34 this.currentBg = event.target.attributes.value.value; 35 //console.log(event.target.attributes.value.value); 36 }, 37 bgAlways: function () { 38 this.currentBg = null; 39 }, 40 currentCheck: function (name) { 41 return this.currentBg === name; 42 } 43 } 44 }) 45 </script> 46</body>
css
1 .bg_jiyu { 2 position: relative; 3 z-index: 1; 4 } 5 6 .bg_jiyu [class^=cov] { 7 /* display: none; */ 8 width: 100%; 9 height: 100%; 10 position: absolute; 11 top: 0; 12 left: 0; 13 z-index: -2; 14 background-size: cover; 15 } 16 17 .bg_jiyu i.cov_always { 18 background-image: url(images/jiyubg00.jpg); 19 } 20 21 /* .bg_jiyu [class^=cov] { 22 display: none; 23 } */ 24 25 .bg_jiyu i.cov1 { 26 background-image: url(images/jiyubg01.jpg); 27 } 28 29 .bg_jiyu i.cov2 { 30 background-image: url(images/jiyubg02.jpg); 31 } 32 33 .bg_jiyu i.cov3 { 34 background-image: url(images/jiyubg03.jpg); 35 } 36 37 .bt_area { 38 position: static; 39 z-index: 10; 40 height: 500px; 41 display: flex; 42 justify-content: space-between; 43 align-items: flex-end; 44 padding-bottom: 40px; 45 } 46 47 .bt_area li a { 48 border: 3px solid #fff; 49 color: #fff; 50 font-size: 3.0rem; 51 font-weight: bold; 52 padding: 20px 30px; 53 transition: 0.4s; 54 } 55 56 @media screen and (max-width: 640px) { 57 .bt_area { 58 flex-direction: column; 59 justify-content: flex-end; 60 align-items: center; 61 } 62 63 .bt_area li { 64 width: 100%; 65 } 66 67 .bt_area li a { 68 display: block; 69 padding: 10px 15px; 70 margin-bottom: 10px; 71 font-size: 1.4rem; 72 text-align: center; 73 } 74 } 75 76 .bt_area li a:hover { 77 background-color: rgba(251, 251, 251, 0.7); 78 } 79 80 /*transition設定*/ 81 .fade-enter-active, 82 .fade-leave-active { 83 transition: all 0.5s ease; 84 } 85 86 /* 表示される時は0から1へ*/ 87 .fade-enter { 88 opacity: 0; 89 } 90 91 .fade-enter-to { 92 opacity: 1; 93 } 94 95 /* 消える時は1から0へ*/ 96 .fade-leave { 97 opacity: 1; 98 } 99 100 .fade-leave-to { 101 opacity: 0; 102 }
分からないところ
上記ソースで目的とする挙動はなんとか出来ておりました、
vue.jsの理解を深めたいためにお聞きしたいです。
その①
メソッド「currentCheck」が発動するのはどうしてでしょうか。
メソッドに3つ登録しました、「bgChenge」「bgAlways」「currentCheck」です。
わたしの理解では、メソッドに登録されているものはイベントがなければ発動しないと思ってました、
「bgChenge」は@mouseoverにより発動します。
「bgAlways」は@mouseoutにより発動します。
上記二つはもちろん理解できました、
しかし「currentCheck」はとくにイベントがないのにもかかわらず、発動します。
currentBgの値が変化することにより発動している?
computedに登録したならば、function記述の中に対応するdata値が存在し、それが変動しているならば発動すると理解してました、
まさしくこの動きをmethodsに登録したものがしてくれております。
これはどうしてでしょうか。
その②
html
1<i v-if="currentCheck('cov01')" class="cov01" key="cov01"></i> 2<i v-if="currentCheck('cov02')" class="cov02" key="cov02"></i> 3<i v-if="currentCheck('cov03')" class="cov03" key="cov03"></i>
上記の記述ですが、『cov01』ばかりになってしまって、あまりスマートには見えません。
他のattr要素(classやkey)にも同じ値が入っているので、attr要素の値を使うことはできないのでしょうか。
以下のような感じです。
html
1<i v-if="currentCheck()" class="cov01" key="cov01"></i> 2<i v-if="currentCheck()" class="cov02" key="cov02"></i> 3<i v-if="currentCheck()" class="cov03" key="cov03"></i>
お手数ではございますが、ただいま、javascript,vueの勉強中でございます、
今後の理解のためにもご教示をお願いします。
補足情報(FW/ツールのバージョンなど)
vue:2.5.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/26 17:57
2018/10/27 01:48 編集