vue動態切換頁面
阿新 • • 發佈：2018-01-28
spl display ack doctype lan solid cti isp 切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> ul li{ list-style: none; display: inline-block; border: 1px solid cornflowerblue; height:40px; line-height: 40px; width: 120px; text-align: center; } </style> </head> <body> <div id="d1"> <ul> <li><span v-on:click="qh(1)">產品介紹</span></li> <li><span v-on:click="qh(2)">規格與包裝</span></li> <li><span v-on:click="qh(3)">售後服務</span></li> </ul> <div v-show="temp1">產品介紹</div> <div v-show="temp2">規格與包裝</div> <div v-show="temp3">售後服務</div> </div> </body> <script> var v1=new Vue({ el:‘#d1‘, data:{ temp1:true, temp2:false, temp3:false, }, methods:{ qh:function (t) { if(t==2){ v1.temp1=false v1.temp2=true v1.temp3=false }else if (t==3){ v1.temp1=false v1.temp2=false v1.temp3=true }else { v1.temp1=true v1.temp2=false v1.temp3=false } } } }) </script> </html>
vue動態切換頁面