栏目之间的切换

这是效果图

 

1，首先引入vue.js文件

<body id="app">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</body>

2，我们要将一个能实现点击的事件给它

    <body id="app">
		<ul>
			<li @click="but" data-id="1" >1</li>
			<li @click="but" data-id="2" >2</li>
			<li @click="but" data-id="3" >3</li>
			<li @click="but" data-id="4" >4</li>
		</ul>
    </body>

3，要给一个你想要显示的div或者其他要显示的标签v-show属性

<div v-show="tap==1">1</div>
<div v-show="tap==2">2</div>
<div v-show="tap==3">3</div>
<div v-show="tap==4">4</div>

4，vue的核心代码

let app = new Vue({
	el:'#app',
	data:{
	tab:1,
	},
	methods:{	
		but:function(e){				
			let tabid = e.target.dataset.id
				this.tab=tabid
				}
			}
})

完整代码

<html>
<head>
<meta charset="utf-8">
<title>vue简单内容的切换</title>
<style>
	li{
		list-style: none;
		width: 100px;
		height: 30px;
		background-color: #00ffff;
		font-size: 20px;
		text-align: center;
		display: inline-block;
	}
	ul{
		margin-left: 50%;
		transform: translate(-249px);
	}
	li:hover{
		background-color: #B0B592;
	}
	.tapS{
		width: 500px;
		height: 500px;
		margin-left: 50%;
		transform: translate(-249px);
		font-size: 50px;
		text-align: center;
		line-height: 500px;
	}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
    <body>
		<div id="app">
			<div>
				<ul>
					<li @click="but" data-id="1">1</li>
					<li @click="but" data-id="2">2</li>
					<li @click="but" data-id="3">3</li>
					<li @click="but" data-id="4">4</li>
				</ul>
			</div>
			<div style="margin-top: 100px;">
				
			</div>
			<div v-show="tab==1" class="tapS" style="background-color: #337AB7;">1</div>
			<div v-show="tab==2" class="tapS" style="background-color: #55FF00;">2</div>
			<div v-show="tab==3" class="tapS" style="background-color: #A9A9A9;">3</div>
			<div v-show="tab==4" class="tapS" style="background-color: #AAAA7F;">4</div>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
				tab:1,
				},
				methods:{	
					but:function(e){				
						let tabid = e.target.dataset.id
						this.tab=tabid
					}
				}
			})
		</script>
    </body>
</html>

# vue.js # html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue