本文介绍了如何在Vue中利用属性进行组件的切换。通过示例代码展示了点击不同链接展示不同组件内容的过程，同时解释了如何避免默认点击事件，以及如何使用和属性进行条件判断和内容展示。在标签中，详细解析了的用法，它是条件渲染指令，用于控制组件的显示。
此处的组件切换使用的是Vue中的component组件中的is属性来实现的。该is属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。
示例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="demo1">
<h2>组件1</h2>
</template>
<template id="demo2">
<h2>组件2</h2>
</template>
<div id="app">
<a href="javascript:void(0)" @click="componentName = 'demo1'">组件1</a> |
<a href="javascript:void(0)" @click="componentName = 'demo2'">组件2</a>
<component :is="componentName"></component>
</div>
<script sr
最低0.47元/天 解锁文章
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
