vue Lesson 4: Use of v-show, v-if, v-bind
1. v-show directive
According to the authenticity of the expression, the display and hiding of the elements are switched, such as: advertisements, mask layers, etc.
<div id='app'>
<input type="button" value="Switch display status" @click="changeIsshow">
<input type="button" value="Add to Age" @click="addage">
<img v-show="isshow" width="200px" height="200px"
src="/imagehost/Illustrations/" />
<img v-show="age>=18" width="200px" height="200px"
src="/imagehost/Illustrations/" />
</div>
<script>
= false //Stop vue from generating production prompts at startup. var app = new Vue({
el: '#app',
data: {
isshow: false,
age: 17,
},
methods: {
changeIsshow: function () {
= !;
},
addage: function () {
++;
}
},
})
</script>2. v-if directive
According to the authenticity of the expression, switch the display and hiding of elements (operate the dom element), use v-show frequently, and vice versa with v-if
<div id='app'>
<input type="button" value="Show/Hide" @click="changehide">
<p v-if="isshow">Back end of the volume front end</p>
<p v-show="isshow">Back end of the volume front end-vshow</p>
</div>
<script>
= false //Stop vue from generating production prompts at startup. var app = new Vue({
el: '#app',
data: {
isshow:false,
},
methods: {
changehide:function(){
= !;
}
},
})
</script>3. v-bind instruction
Set the attributes of the element, such as (src, title, class, etc.) v-bind: Attribute name = expression v-bind: can be abbreviated as :class="" Eliminate v-bind
<style>
.active{
border: 1px solid red;
}
</style>
<div id='app'>
<img v-bind:src="imgsrc" width="200px" height="200px" alt=""/><br>
<img :src="imgsrc" width="200px" height="200px" alt="" :title="title+'!!!'" :class="isactive?'active':''" @click="togactive"/>
<img :src="imgsrc" width="200px" height="200px" alt="" :title="title+'!!!'" :class="{active:isactive}" @click="togactive"/>
</div>
<script>
= false //Stop vue from generating production prompts at startup. var app = new Vue({
el: '#app',
data: {
imgsrc:"/imagehost/Illustrations/",
title:"vUE rolls you",
isactive:false,
},
methods: {
togactive:function(){
= !;
}
},
})
</script>This is the article about the use of v-show, v-if, v-bind in vue. This is the end. For more related contents of vue v-show, v-if, v-bind, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!