v-show
According to the true and false of the expression value, switch the display and hide of the element (the manipulating isdisplaystyle)
<img v-show="表达式" />
如果表达式为true，图片img显示
如果表达式为false，图片img隐藏
v-if
According to the true and false of the expression value, switch the display and hide of the element (the manipulating isjudgmentelement)
<img v-if="表达式" />
如果表达式为true，图片img显示
如果表达式为false，图片img隐藏
Now let's write a simple program to test the difference between the two
<!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>
The running diagram is shown below.
At this time, the properties of the two buttons are as follows
When we click on the button with the value of'change', the'show' button with the default attribute value of true and the'if' button correspond to the v-show and v-if values are reversed.
At this time, both buttons disappear.
It can be seen that the display attribute of the show button has changed to none
and the if button is directly destroyed
v-bind
Set the attributes of the element (such assrc,title,class)
Basic use
v-bind: attribute name = expression
<img v-bind:src="imgsrc" >
v-bind can be abbreviated as the symbol':'
<img :src="imgsrc" >
Test code
<!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>
Define the src, title, and class attributes respectively
Note that you need to declare attributes in data. You cannot write the result value directly in the v-bind attribute. The written value will be regarded as the attribute name, so that the attribute name not found error is reported.
Example: Simple picture switching
Function: Use two buttons to switch between left and right pictures. If it is the first picture, it can only switch to the right, if it is the last picture, it can only switch to the left, which means that the button is hidden at this time.
<!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>