Vue中组件的应用以及分页面的编写

最新推荐文章于 2023-12-23 16:21:31 发布

Haikin Tei

最新推荐文章于 2023-12-23 16:21:31 发布

阅读量317

点赞数

文章标签： vue js vue.js

本文链接：https://blog.csdn.net/qq_42683507/article/details/117668298

版权

组件作为vue.js开发中是十分重要的一环，很多的电商购物车项目都会在分页面的时候运用到组件的原理，尤其是动态组件，用的十分广泛。

在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。

component接收一个名为is的属性，is的值应为在父组件中注册过的组件的名称。

<component :is='view></component>

下面是一个常见的分页面的页面
在这里插入图片描述
这样常见的页面可以称为分页面。
点击左侧的项目，就会跳转到右侧的被挂载的组件，这样就形成了分页面。
那么我们也自己用vue去实践一下这样的组件使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分页面系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			.left{
				width: 20%;
				height: 100vh;
				float: left;
				background-color:lightgray;
				overflow: auto;
			}
			.left ul li{
				text-align: center;
				display: block;
				height: 50px;
				border-bottom: #000000 1px solid;
				padding-top: 25px;
			}
			.right{
				width: 80%;
				height: 100vh;
				float:right;
				background-color: aliceblue;
				overflow: auto;
			}
			
			.right ul li{
				float: left;
				margin-top: 20px;
				margin-left: 20px;
			}
			
			.addcolor{
				text-align: center;
				display: block;
				height: 50px;
				background-color: aliceblue;
				padding-top: 25px;
				border-left: deeppink 5px solid;
			}
			
			img{
				position: inherit;
				width: 110px;
				height: auto;
			}
			
			div::-webkit-scrollbar {
			  display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="left">
				<ul>
					<li v-for="(i,index) in nav_item" @click="change(index)"  v-bind:class="{addcolor:index==num}">{{i}}</li>
				</ul>
			</div>
			
			<div class="right">
				<!-- <component :is="item" ></component> -->
				<inner_item :b="num"></inner_item>
			</div>
		</div>
		
		<template id="inner_item">
			<div>
				<h2 v-for="(i,index) in nav_item" v-show="b==index">这里是“{{i}}”的内容</h2>
				<ul>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
					<li><img src="../../01-02vue/demo/aa.jpg" ></li>
				</ul>
			</div>
			
		</template>
	</body>
	
	<script src="vue.js"></script>
	<script>
		
		var inner_item={
			template:'#inner_item',
			props:['b'],
			data(){
				return{
					nav_item:['精选推荐','年中特卖','女装','男装','女鞋','男鞋','箱包皮具','酒水饮料','生活超市','家居家纺','母婴','手机数码','户外运动','家用电器','国际','健康医药','图书文娱'],
					b:0
				}
			},
			methods:{
				change(b){
					this.num=b
				}
			}
		}
		
		new Vue({
			el:'#app',
			data:{
				num:0,
				item:'inner_item',
				nav_item:['精选推荐','年中特卖','女装','男装','女鞋','男鞋','箱包皮具','酒水饮料','生活超市','家居家纺','母婴','手机数码','户外运动','家用电器','国际','健康医药','图书文娱']
			},
			methods:{
				change(b){
					this.num=b;
					console.log(this.num);
					
				}
				
				
			},
			components:{
				'inner_item':inner_item
			}
		})
	</script>
</html>

效果如下：
在这里插入图片描述

Haikin Tei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中组件的应用以及分页面的编写

组件作为vue.js开发中是十分重要的一环，很多的电商购物车项目都会在分页面的时候运用到组件的原理，尤其是动态组件，用的十分广泛。在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。component接收一个名为is的属性，is的值应为在父组件中注册过的组件的名称。<component :is='view></component>下面是一个常见的分页面的页面这样常见的页面可以称为分页面。点击左侧的项目，就会跳转到右侧的
复制链接

扫一扫