vue中的is

最新推荐文章于 2023-05-17 14:38:56 发布

小蒋小蒋快乐成长

最新推荐文章于 2023-05-17 14:38:56 发布

阅读量596

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/object_oriented/article/details/97777006

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

is有两种用法：

第一种就是在一些标签中像ul，ol，table等使用自定义的一些组件，浏览器的解析是有问题的，甚至报错。而添加这个属性之后就可正常使用,但是我测试是可以用的，可能是版本的问题，不知道什么原因。

第二种也是非常好用的一种，用于组件的切换，在一些导航栏上是非常好用的具体例子如下

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!--	响应式设计	 -->
		 <meta name="viewport" content="width=device-width, initial-scale=1"/>
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>这里是动态组件</title>
		<link rel="stylesheet" href="template.css" />
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<!-- <script type="text/javascript" src="js/vue.js"></script> -->
		<script src="js/vue.js"></script>
		<style type="text/css">
			.left{pasition:fixed;width:190px;}
			.left ul li{height:40px;width:100%;margin-top:10px;background:pink;}
			.right{width:500px;height:200px;position:relative;top:-250px;left:190px;background:red;}
		</style>
	</head>
	<body>
	
			<div id="container">
				<div class="left">
					<ul>
						<li
							v-for="tab in tabs"
							v-bind:key="tab.name"
							v-bind:class="['tab-button',{active:currentTab === tab.name}]"
							v-on:click="currentTab = tab.name"
						>
							<a href="#">{{ tab.item }}</a>
							
						</li>
					</ul>
				
				</div>
				<div class="right">
					<keep-alive>
						<component
								v-bind:is="currentTabComponent"
								class="tab">
						</component>
					</keep-alive>
				</div>
				<div style="clear:both;"></div>
				<div>hahahahhhhh</div>
			</div>
			<script>
				
				Vue.component('tab-zy1', {
					template: '<div>我是zy1 页面</div>'
				});
				Vue.component('tab-zy2', {
					template: '<div>我是zy2页面</div>'
				});
				Vue.component('tab-zy3', {
					template: '<div>我是zy3 页面</div>'
				});
				Vue.component('tab-zy4', {
					template: '<div>我是zy4页面</div>'
				});
				Vue.component('tab-zy5', {
					template: '<div>我是zy5 页面</div>'
				});
				Vue.component('tab-zy6', {
					template: '<div>我是zy6 页面</div>'
				});
				Vue.component('tab-zy7', {
					template: '<div>我是zy7 页面</div>'
				});


				new Vue({
					el: '#container',
					data: {
						currentTab: 'zy1',
						tabs: [{name:'zy1',item:'物理资源'},{name:'zy2',item:'存储资源'} ,{name:'zy3',item:'客户端'},{name:'zy4',item:'存储资源'},{name:'zy5',item:'系统管理'},{name:'zy6',item:'性能统计'},{name:'zy2',item:'监控中心'}],
					},
					computed: {
						currentTabComponent: function () {
							return 'tab-' + this.currentTab.toLowerCase();
						}
					}
				});
			</script>

		
		
	</body>
</html>

小蒋小蒋快乐成长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中的is

is有两种用法：第一种就是在一些标签中像ul，ol，table等使用自定义的一些组件，浏览器的解析是有问题的，甚至报错。而添加这个属性之后就可正常使用,但是我测试是可以用的，可能是版本的问题，不知道什么原因。第二种也是非常好用的一种，用于组件的切换，在一些导航栏上是非常好用的具体例子如下<!doctype html><html lang="en"> &lt...
复制链接

扫一扫