v-show文本解释：
v-show：根据表达值的真假，切换元素的显示和隐藏（隐藏后源代码仍存在）
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>v-show指令</title></head><body><div id="app"><!--点击后改变isShow的值，将isShow变为true或false，以此控制img的显示与隐藏--><input type="button" value="https://www.huyubaike.com/biancheng/切换显示状态" @click="changeIsShow"><!--点击增加年龄值--><input type="button" value="https://www.huyubaike.com/biancheng/累加年龄" @click="addAge"><!--v-show用于控制元素的存在或隐藏，这里采用isShow变量，根据isShow的值来判断是否存在--><img v-show="isShow" src="https://www.huyubaike.com/biancheng/img/monkey.gif" ><!--根据年龄值大小控制元素的存在或隐藏，只是为了表示v-show的参数需要是一个true或false的判定--><img v-show="age>=18" src="https://www.huyubaike.com/biancheng/img/monkey.gif" ></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,age:17},methods: {// 进行 isShow 的true或false更改changeIsShow:function(){this.isShow = !this.isShow;},addAge:function(){this.age++;}},})</script></body></html>v-if文本解释：
v-if：根据表达值的真假，切换元素的显示和隐藏（隐藏后，源代码不存在）
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-if指令</title></head><body><div id="app"><!--以下操作实际效果同v-show相同，但隐藏后在页面的展示栏中无法看到源代码，属于彻底隐藏--><input type="button" value="https://www.huyubaike.com/biancheng/切换显示" @click="toggleIsShow"><p v-if="isShow">河南师范大学</p><p v-show="isShow">河南师范大学 - v-show修饰</p><h2 v-if="temperature>=35">热死啦</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,temperature:20},methods: {toggleIsShow:function(){this.isShow = !this.isShow;}},})</script></body></html>v-bind文本解释：
v-bind：设置元素的属性（比如：src，title 。class）
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind指令</title><style>.active{border: 1px solid red;}</style></head><body><!--v-bind通常可以隐藏，直接写 :属性 即可--><div id="app"><!--这里采用v-bind设置页面图片--><img v-bind:src="http://shimg.jingyanzongjie.com/230726/0256004922-13.jpg" ><br><!--这里采用v-bind略写方式?j?"https://www.huyubaike.com/tag/1905.html" target="_blank" class="yzm-keyword-link">vue9rumhtemdouWbvueJh++8jOWQjumdoumHh+eUqCBkYXRhIOWPmOmHj+aOp+WItuWbvueJh+Wxleekui0tJmd0OwogICAgICAgICZsdDshLS3lkIzmoLfph4fnlKh2LWJpbmTmjqfliLZ0aXRsZe+8jGNsYXNz562J5bGe5oCn77yM6YeH55So5LiJ5YWD6L+Q566X56ym5p2l5o6n5Yi2YWN0aXZlLS0mZ3Q7CiAgICAgICAgJmx0O2ltZyA6c3JjPQ=="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"><br><!--通过点击事件来控制class--><img :src="http://shimg.jingyanzongjie.com/230726/0256004922-13.jpg" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{imgSrc:"http://shimg.jingyanzongjie.com/230726/02560054H-19.png",imgTitle:"黑马程序员",isActive:false},methods: {toggleActive:function(){this.isActive = !this.isActive;}},})</script></body></html>
经验总结扩展阅读
- 如何创建qq群（qq怎么自己建群)
- 银色药丸面膜2层怎么用?
- 海岛绒和法兰绒的区别?
- 长期打水光针有危害吗?
- 白晓欧家齐是什么电视剧中的人物?
- 海蓝之谜粉底液真伪怎么辨别?
- 长寿毛可以拔吗?
- 白杰是是个保安哪部电视剧的人物?
- 罗小黑战记中的人物配音介绍?
- 镇江手表怎么保养?