vuejs的：is和is使用和区别

Vue中is特性的应用

最新推荐文章于 2025-06-10 20:00:00 发布

原创最新推荐文章于 2025-06-10 20:00:00 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue基础专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了Vue中is特性的使用方法，包括如何在特定的HTML元素下使用组件，以及如何利用is属性实现组件之间的动态切换，适用于前端开发者学习。

vue中is特性

将已写好的组件挂载到已存在的元素上，遇到某些元素,此时的组件将失去作用，比如：

就是某些标签下只能使用指定的标签，否则无法被浏览器正确解析，例如UL，表中，a，选择这些。（例如UL一般跟着li，选择一般跟着选项这样），而如下代码并不能被浏览器正确的解析，最终导致组件不能生效。

<ul>
    <component-name></component-name>
</ul>

如果我们想要在这些标签UL，表中，a，选择下使用组件，想要他正确的被解析出来，就需要使用IS属性。is发挥作用

是属性的值是组件名，例如在UL下使用一个组件，代码可以这样写：

//声明一个组件
new Vue({
    components:{
        'component-name':{
           template:'<p>你好，这是一个示例</p>' 
        }
    }
})
 
// ul下使用组件
<ul>
    <li is="component-name"></li>
</ul>

:is 实现多个组件之间的切换

<!DOCTYPE html>
<html>
<head>
	<title>动态组件切换选项卡2</title>
</head>
<body>
	<div id="app">
		<div>
			<a href="" @click.prevent="componentName='com-html'">html</a>
			<a href="" @click.prevent="componentName='com-css'">css</a>
			<a href="" @click.prevent="componentName='com-js'">js</a>
			<component :is="componentName"></component>
		</div>
	</div>
	
</body>
<script type="text/javascript" src="vue/vue.js"></script>
<script type="text/javascript">
	let ComHtml={
		template:"<p>我是html</p>"
	}
	let ComCss={
		template:"<p>我是css</p>"
	}
	let ComJs={
		template:"<p>我是js</p>"
	}//定义组件对象
	let app = new Vue({
		el:'#app',
		data:{
			componentName:"com-html"
		},
		components:{
			ComHtml,
			ComCss,
			ComJs
		}//注册组件	
	})
</script>
</html>

运行结果如下：上面就实现了简单的选项卡切换功能了