v-show
根据表达值的真假，切换元素的显示和隐藏（操纵的是display样式）
<img v-show="表达式" />
如果表达式为true，图片img显示
如果表达式为false，图片img隐藏
v-if
根据表达值的真假，切换元素的显示和隐藏（操纵的是dom元素）
<img v-if="表达式" />
如果表达式为true，图片img显示
如果表达式为false，图片img隐藏
现在我们来写个简单的程序测试一下两者的区别
<!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>
运行图如下所示
此时两个按钮的属性如下
当我们点击值为‘变’的的按钮时 默认属性值为true的‘show’按钮和‘if’按钮对应v-show、v-if值取反
此时二者按钮都消失，此时属性如下
可见show按钮display属性变为了none
而if按钮直接被销毁了
v-bind
设置元素的属性（比如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属性
注意需要在data里声明属性，不能直接在v-bind属性里写结果值，写的值会被认为为属性名，以至于报未找到属性名错误。
实例：简单图片切换
功能：通过两个按钮实现左右图片切换功能，如果为第一张图片则只能往右切换，如果为最后一张则只能往左切换，即实现此时按钮隐藏。
<!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>