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>