Vue组件切换的两种方式
程序员文章站
2022-03-29 19:32:21
...
1.v-if与它的v-else
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染。如果使用了v-else，则会在v-if为false时执行v-else的语句
但只适合两个组件的切换
<body>
<div id="app">
<input type="button" value="v-if" @click="flag=true">
<input type="button" value="v-else" @click="flag=false">
<!-- 5，放置两个组件 -->
<vif v-if="flag"></vif>
<velse v-else="flag"></velse>
</div>
<!-- 3.设置template的内容 -->
<template id="isVIf">
<div>
<h1>这是v-if</h1>
</div>
</template>
<template id="isVElse">
<div>
<h1>这是v-else</h1>
</div>
</template>
<script>
// 2.创建两个组件
Vue.component("vif", {
template: "#isVIf"
})
Vue.component("velse", {
template: "#isVElse"
})
//1.创建Vue实例,得到 ViewModel
var app = new Vue({
el: '#app',
data: {
// 4.用于判断执行条件
flag: true
},
methods: {}
})
</script>
</body>
2.使用Vue提供的<component>标签
通过<component>的 v-bind:is 属性，可以显示指定名称的组件
适合多个组件之间的切换
<body>
<div id="app">
<!-- 5.为按钮绑定事件 -->
<input type="button" value="组件1" @click="comName='com1'">
<input type="button" value="组件2" @click="comName='com2'">
<input type="button" value="组件3" @click="comName='com3'">
<input type="button" value="组件4" @click="comName='com4'">
<!-- 3.创建Vue提供的<component>标签， :is属性会显示指定的组件 -->
<component :is="comName"></component>
</div>
<script>
// 2.创建组件
Vue.component("com1", {
template: "<h1>我是组件1</h1>"
})
Vue.component("com2", {
template: "<h1>我是组件2</h1>"
})
Vue.component("com3", {
template: "<h1>我是组件3</h1>"
})
Vue.component("com4", {
template: "<h1>我是组件4</h1>"
})
//1.创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 4.创建变量comName，用于控制<component>标签:is属性的值
comName: 'com1'
},
methods: {}
})
</script>
</body>