vue中的v-show,v-if,v-bind怎么使用

这篇文章主要介绍了vue中的v-show,v-if,v-bind怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中的v-show,v-if,v-bind怎么使用文章都会有所收获，下面我们一起来看看吧。

1，v-show指令

根据表达式的真假，切换元素的显示和隐藏如：广告，遮罩层等

 <div id='app'>    <input type="button" value="切换显示状态" @click="changeIsshow">    <input type="button" value="增加年龄" @click="addage">    <img v-show="isshow" width="200px" height="200px"      class="lazy" data-src="https://file.lsjlt.com/upload/202307/04/bpgvvm2rn4x.png" />    <img v-show="age>=18" width="200px" height="200px"      class="lazy" data-src="https://file.lsjlt.com/upload/202307/04/bpgvvm2rn4x.png" />  </div><script>    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。    var app = new Vue({      el: '#app',      data: {        isshow: false,        age: 17,      },      methods: {        changeIsshow: function () {          this.isshow = !this.isshow;        },        addage: function () {          this.age++;        }      },    })  </script>

2，v-if指令

根据表达式的真假，切换元素的显示和隐藏（操作dom元素）,频繁操作用v-show,反之用v-if

<div id='app'>    <input type="button" value="显示/隐藏" @click="changehide">   <p v-if="isshow">卷完后端卷前端</p>   <p v-show="isshow">卷完后端卷前端-vshow</p>  </div> <script>    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。    var app = new Vue({      el: '#app',      data: {      isshow:false,      },      methods: {        changehide:function(){          this.isshow = !this.isshow;        }      },    })  </script>

3，v-bind指令

设置元素的属性比如（class="lazy" data-src,title,class等）v-bind:属性名=表达式   v-bind:可简写成  :class=""  省掉v-bind

    <style>    .active{      border: 1px solid red;    }  </style><div id='app'>  <img v-bind:class="lazy" data-src="imgclass="lazy" data-src"  width="200px" height="200px"  alt=""/><br>  <img :class="lazy" data-src="imgclass="lazy" data-src"  width="200px" height="200px"  alt="" :title="title+'!!!'"  :class="isactive?'active':''" @click="togactive"/>  <img :class="lazy" data-src="imgclass="lazy" data-src"  width="200px" height="200px"  alt="" :title="title+'!!!'"  :class="{active:isactive}" @click="togactive"/>  </div><script>    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。    var app = new Vue({      el: '#app',      data: {        imgclass="lazy" data-src:"https://file.lsjlt.com/upload/202307/04/bpgvvm2rn4x.png",        title:"vUE卷你",        isactive:false,      },      methods: {        togactive:function(){          this.isactive = !this.isactive;        }      },    })  </script>

关于“vue中的v-show,v-if,v-bind怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue中的v-show,v-if,v-bind怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。