vue 基础入门笔记 12:组件切换
818 / 0 / 创建于 4年前 /
September 的个人博客
vue 基础入门笔记 12
- component 组件占位符 :is 设置要渲染的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
//点击不同tab 切换不同组件
<a href="#home" @click.prevent="componentName = 'tabpanel1'" aria-controls="home" role="tab"
data-toggle="tab">home</a>
</li>
<li role="presentation">
<a href="#tab" @click.prevent="componentName = 'tabpanel2'" aria-controls="tab" role="tab"
data-toggle="tab">tab</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
</div>
//组件占位符
<component :is="componentName"></component>
</div>
</div>
<template id="tab1">
<h1>tab1</h1>
</template>
<template id="tab2">
<h1>tab2</h1>
</template>
<script>
//定义两个组件
Vue.component('tabpanel1', {
template: '#tab1'
})
Vue.component('tabpanel2', {
template: '#tab2'
})
var vm = new Vue({
el: '#app',
data: {
//默认指向第一个组件
componentName: 'tabpanel1'
},
methods: {}
});
Vue.config.devtools = true
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：