vue中is与:is的区别

原创于 2018-07-16 13:54:41 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #:is #vue指令

vue问题专栏收录该内容

1 篇文章

订阅专栏

本文通过实例演示了如何在Vue.js中使用动态组件。通过设置show数据为'one'，展示了如何动态切换显示的组件。这涉及到Vue.js的组件系统和数据绑定特性，对于理解和应用Vue的动态组件功能非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简略回答

假设父组件中有一个show数据,show="one"
:is="show"-->实际上是is="one"

is="show"-->实际上就是is="show"

详细解释

<div id="app">
	<span>这是  :is="show"的案例</span>
	<component :is="show"></component>
	<span>这是  is="show"的案例</span>
	<component is="show"></component>
</div>
<script>
	Vue.component('one',{
		template: "<div>one<div>"
	})
	Vue.component('show',{
		template: "<div>show<div>"
	})
	var vm = new Vue({
		el: '#app',
		data: {
			show: 'one'
		},
	})
</script>

结果