vue默认三个图标点击哪个切换图标实例代码
时间: 2023-07-26 10:05:27 浏览: 53
以下是一个简单的例子,展示如何使用 Vue 和三个图标来切换显示不同的内容:
HTML:
```html
<div id="app">
<button @click="selectedIcon = 'home'"><i class="fas fa-home"></i></button>
<button @click="selectedIcon = 'user'"><i class="fas fa-user"></i></button>
<button @click="selectedIcon = 'settings'"><i class="fas fa-cog"></i></button>
<div v-if="selectedIcon === 'home'">
<h1>Home Page</h1>
<p>Welcome to the home page!</p>
</div>
<div v-if="selectedIcon === 'user'">
<h1>User Profile</h1>
<p>Here is your user profile information.</p>
</div>
<div v-if="selectedIcon === 'settings'">
<h1>Settings</h1>
<p>Customize your settings here.</p>
</div>
</div>
```
JavaScript:
```javascript
new Vue({
el: '#app',
data: {
selectedIcon: 'home'
}
});
```
在这个例子中,我们使用了三个 FontAwesome 图标(home、user、cog),并将它们包装在按钮标签中。当用户点击其中一个按钮时,我们将 selectedIcon 数据属性更新为所点击的图标名称。然后,我们使用 v-if 指令来根据 selectedIcon 的不同值来显示不同的内容。