Vue组件-组件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>42-Vue组件-组件切换</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.组件切换
对于普通的元素我们可以通过v-if来实现切换
对于组件我们也可以通过v-if来实现切换
因为组件的本质就是一个自定义元素
-->
<!--这里就是MVVM中的View-->
<div id="app">
<button @click="toggle">切换</button>
<!--<p v-if="isShow">我是首页</p>
<img v-else src="images/fm.jpg" alt="">-->
<home v-if="isShow"></home>
<photo v-else></photo>
</div>
<template id="home">
<div>
<p>我是首页</p>
</div>
</template>
<template id="photo">
<div>
<img src="images/fm.jpg" alt="">
</div>
</template>
<script>
// 自定义全局组件
Vue.component("home", {
template: "#home",
});
Vue.component("photo", {
template: "#photo",
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
isShow: true
},
// 专门用于存储监听事件回调函数
methods: {
toggle(){
this.isShow = !this.isShow;
}
},
// 专门用于定义计算属性的
computed: {
}
});
</script>
</body>
</html><< 上一篇
下一篇 >>