順序
インターンシップの 3 か月目に、最近、Vue フレームワークの開発をフロントエンドに強制されていることを再確認しました. 私はほとんど自分自身を深く疑っていました. 自分でケースを書き、ソースコードと比較しました. 実験の結果、 href 属性のゴブリンが働いていました。
例
写真の差し替え例を書こうと思いますが、最初の写真の左矢印が消え、最後の写真の右矢印が消え、残りの写真は正常に左右を入れ替えることができます。
基本コード
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" @click="prev" v-show="index==0?false:true"><img src="img/翻页1.png" alt=""></a>
<img width="1000px" :src="url[index]" alt=""/>
<a href="" @click="next" v-show="index==6?false:true"><img src="img/翻页2.png" alt=""></a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:[
"img/1.png", "img/2.png",
"img/3.png", "img/4.png",
"img/5.png", "img/6.png",
"img/7.png"
],
index:0
},
methods:{
prev:function () {
this.index--;
},
next:function () {
this.index++;
}
}
})
</script>
</body>
</html>
分析する
- 画像表示：切り替えたい画像リソースを配列に入れて渡す- img画像タグのsrc属性でバインディング
v-bindとして省略可能:属性 - 左右の切り替え: 左右の矢印の画像をハイパーリンク タグで囲み、矢印が表示されているかどうかを判断
v-showします。ソース コードでは、index==0?false:true/ の部分を/index==6?false:trueに置き換えることができます。index>0index<6 - イベント バインディング: 左右の矢印にクリック イベントを追加して、配列の添え字値を変更し、リソースを切り替えるという目的を達成します。
質問
ここまでで基本的な機能はおおむね実現できたので、次に切り替えると、基本的なコードにあるように a タグに href 属性を追加しているのですが、値が空になっています<a href=""></a>。実際には、値が空の場合、デフォルトで更新されるためです。
href 属性の値が # の場合は、<a href="#"></a>通常通り画像を切り替えられるのですdivが<br>、その前に複数行追加すると、デフォルトでは画像を切り替えるたびに先頭に戻ってしまい、下にスライドして撮影。このとき# の機能はアンカーポイントで、#自定义位置名特定の位置へのジャンプを指定することができます。
href 属性の値がjavascript:;/の場合はjavascript:void(0);、<a href="javascript:void(0);"></a>通常どおり画像を切り替えることができ、ページを移動する必要はありません (空白行が複数ある場合は、上下にスライドします)。現時点では、<a></a>効果と一致しており、href 属性は無効になっており、プレースホルダーとしてのみ使用されています。
要約する
<a href=""></a>、href 属性が空で、ハイパーリンクをクリックするとデフォルトで更新されます<a> </a>タグはハイパーリンクですが、href 属性がなければ、単なるハイパーリンクのプレースホルダーです。<a href="#"></a>、href 属性の値は # です。これは、ラベルが配置に使用され、# には場所情報が含まれ、デフォルトのアンカーがページの上部にあることを意味します<a href="javascript:void(0);"></a>、 href の属性値の文字列は属性が無効であることを示し、リソースのジャンプとアクセスは行われず、通常のタグとしてのみ使用されます