<!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>
原文地址：https://www.cnblogs.com/ldq1996/p/8371131.html
时间： 2024-10-10 07:02:53