<!doctype html> <html> <head> <meta charset="UTF-8"> <title>v-if选择指令</title> <script src="js/vue.js"></script> </head> <body> <h4>根据表达式执行的结果的真假,来选择是否要挂载到DOM上</h4> <div id="container"> <p>{{msg}}</p> <h5>!isMember</h5> <!-- if执行结果是真显示 --> <p v-if="!isMember">仅会员可见</p> <h5>isMember</h5> <p v-if="isMember">仅会员可见</p> <ul> <li v-if="answer=='a'">A</li> <li v-else-if="answer=='b'">B</li> <li v-else-if="answer=='c'">C</li> <li v-else>D</li> </ul> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", isMember:false, answer:"a" }, // 方法 created:function(){ console.log("vue的实例创建完成"); } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>练习</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <h1 v-if="isDataReady">数据正在加载……</h1> <ul v-if="!isDataReady"> <li v-for="tmp in myList">{{tmp}}</li> </ul> </div> <script> new Vue({ el:"#container", data:{ isDataReady:true, myList:[] }, created:function(){ //Vue实例创建完成后自动调用该方法 setTimeout(function(){ //修改isDataReady的值 this.isDataReady = false; }.bind(this),1000); //初始化myList this.myList=[100,200,300,400,500]; } }) </script> </body> </html>