vue2.0版本指令v-if与v-show的区别
生活随笔
收集整理的這篇文章主要介紹了
vue2.0版本指令v-if与v-show的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-if： 判斷是否加載，可以減輕服務器的壓力，在需要時加載。
v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。
v-if示例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="vue2.2.js"></script></head><body><!--與v-else一樣，v-else-if 必須要在v-if或者-else-if之后--><div id="app"><h1>hello,VueJs</h1><h1 v-if="yes">Yes!</h1><h1 v-if="no">No!</h1><h1 v-if="age>=25">Age1:{{age}}</h1><h1 v-else-if="age<25">Age2:{{age}}</h1><h1 v-if="name.indexOf('ab')>=0">name1:{{name}}</h1><h1 v-else>Name2:{{name}}</h1></div><script>var vm = new Vue({el: "#app",data: {yes: true,no: false,age: 18,name: "Mr.lan"}})</script></body></html>v-show示例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="../vue2.2.js"></script></head><body><!--注意v-show不支持<template>語法注意v-show的元素會始終渲染并保持在DOM中，v-show是簡單的切換元素的css屬性display--><div id="app"><p v-show="ok">v-show演示1</p><p v-show="!ok">v-show演示2</p></div><script>var vm = new Vue({el:"#app",data:{ok:false}})</script></body> </html>?
轉載于:https://www.cnblogs.com/lhl66/p/7492074.html
總結
以上是生活随笔為你收集整理的vue2.0版本指令v-if与v-show的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 和家亲app登录不了
- 下一篇： html5倒计时秒杀怎么做,vue 设