v-show：根据表达式切换显示的和隐藏的状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="图片" @click="disable"/> <img v-show="isshow" src="./u=4243634915,3474426244&fm=26&gp=0.jpg"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ isshow:false }, methods:{ disable:function(){ this.isshow=!this.isshow; } } }) </script> </body> </html>
v-show指令作用：根据真假进行切换元素的显示状态。
原理是修改元素的display，显示隐藏
指令后面的内容被解析成布尔值
v-show后面可以写表达式
V-if：根据表达式真假切换显示和隐藏
v-if和v-show结果是一样的
区别：
v-show操作的是display这个元素的值
v-if操作的是dom，直接就删了，需要在加回来
频繁使用时v-show，反之使用v-if
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"> <title>Document</title> <style> .active{ border: 2px solid red; } </style> </head> <body> <div id="app"> <img v-bind:src="bindsrc"> </br> <img :src="bindsrc" :title="bindtitle" @click="Onclick" :class="isActive?'active':''"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ bindsrc:"./u=4243634915,3474426244&fm=26&gp=0.jpg", bindtitle:"rick and morty", isActive:false }, methods:{ Onclick:function(){ this.isActive=!this.isActive; } } }) </script> </body> </html>
V-bind指令作用是绑定属性
完整的写法是v-bind：属性名
简写的化可以省略前面v-bind只写：
动态增删class