v-show
式の値の真偽に応じて、要素の表示と非表示を切り替えます（操作は表示スタイル）
<img v-show="表达式" />
如果表达式为true，图片img显示
如果表达式为false，图片img隐藏
v-if
式の値の真偽に応じて、要素の表示と非表示を切り替えます（操作は判定素子）
<img v-if="表达式" />
如果表达式为true，图片img显示
如果表达式为false，图片img隐藏
それでは、2つの違いをテストする簡単なプログラムを書いてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button type="button" v-show="isshow">show</button>
<button type="button" v-if="isshow">if</button>
<button @click="change" >变</button>
</div>
<script>
var app =new Vue({
el:"#app",
data:{
isshow:true
},
methods:{
change:function(){
this.isshow=!this.isshow;
}
}
})
</script>
</body>
</html>
実行図を以下に示します。
このとき、2つのボタンのプロパティは次のとおりです。
「変更」の値でボタンをクリックすると、「表示」ボタンと「if」ボタンのデフォルトの属性値がv-showとv-ifの値に対応します。
このとき、両方ボタンが消え、属性は次のとおりです
表示ボタンの表示属性がnoneに変更され
、ifボタンが直接破棄されていることがわかります。
vバインド
要素の属性を設定します（などsrc、title、class）
基本的な使用法
v-bind：属性名=式
<img v-bind:src="imgsrc" >
v-bindは、記号「：」と省略できます。
<img :src="imgsrc" >
テストコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- <img v-bind:src="imgsrc" > -->
<img :src="imgsrc" :title="imgtitle" :class="imgclass">
</div>
<script>
var app =new Vue({
el:"#app",
data:{
imgsrc:"img/0.jpg",
imgtitle:"学习风景",
imgclass:"imgclass"
}
})
</script>
</body>
</html>
src、title、class属性をそれぞれ定義します
データで属性を宣言する必要があることに注意してください。v-bind属性に結果値を直接書き込むことはできません。書き込まれた値は属性名と見なされるため、属性名が見つかりませんというエラーが報告されます。
例：単純な画像切り替え
機能：2つのボタンを使用して、左と右の画像を切り替えます。最初の画像の場合は右にのみ切り替えることができ、最後の画像の場合は左にのみ切り替えることができます。つまり、ボタンはこの時点で非表示になっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="text-align: center;">
<div id="app">
<button type="button" @click="left" v-show="leftshow"><</button>
<img :src="imgs[index]" style="width: 200px; ">
<button type="button" @click="right" v-show="rightshow">></button>
</div>
<!-- 对于制作原型或学习，你可以这样使用最新版本： -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
imgs:[
//图片路径
"./img/0.jpg",
"./img/1.jpg",
"./img/2.jpg",
"./img/3.jpg",
"./img/4.jpg",
"./img/5.jpg",
],
index:0,
leftshow:false,
rightshow:true
},
methods:{
left:function(){
this.index--;
if(this.index==0)
this.leftshow=false;
if(this.index>=0&&this.index<5){
this.rightshow=true;
}
},
right:function(){
this.index++;
if(this.index>=0&&this.index<5){
this.rightshow=true;
}
else if(this.index==5)
this.rightshow=false;
if(this.index>0)
this.leftshow=true;
}
}
})
</script>
</body>
</html>