<!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>