【Vue案例三】使用v-if指令 / component标签实现组件的切换

前面介绍了Vue中组件的创建方式和data及methods属性，本文我们来做一个Vue组件的切换案例，效果如下：

这个效果相信大家都能搞定，本文希望通过这个案例来加深一下对组件的使用。我们通过前面介绍的 v-if 指令和 component 标签两种方式来实现这种效果。

通过v-if控制实现

<!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.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><!-- 添加链接标签，通过 v-if 和 v-else 指令来控制显示 --><a href="" @click.prevent='flag=true'>登录</a><a href="" @click.prevent='flag=false'>注册</a><!--注意： v-if v-else-if v-else 使用^_^ --><login v-if=flag></login><register v-else></register></div><script>// 创建登录的组件Vue.component("login",{template: "<h3>这是一个登录(login)组件</h3>"})// 创建注册的组件Vue.component("register",{template: "<h3>这是一个注册(register)组件</h3>"})var vm = new Vue({el: "#app",data: {flag:false},methods: {}})</script>
</body>
</html>

通过component标签实现

<!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.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><a href="" @click.prevent="comName='login'">登录</a><a href="" @click.prevent="comName='register'">注册</a><!-- component 是一个占位符, :is 属性用来指定要展示的组件的名称 --><component :is="comName"></component></div><script>// 创建登录的组件Vue.component("login",{template: "<h3>这是一个登录LOGIN组件</h3>"})// 创建注册的组件Vue.component("register",{template: "<h3>这是一个注册组件</h3>"})var vm = new Vue({el: "#app",data: {comName: 'login'},methods: {}})</script>
</body>
</html>

【Vue案例三】使用v-if指令 / component标签实现组件的切换相关推荐

Vue — 第三天（计算属性和json-server）
计算属性使用场景如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 例如:要对给定的字符串做翻转处理之后再来显示. <div id ...
zabbix生产环境案例(三)
生产环境案例(三) 链接:https://pan.baidu.com/s/1q5YwJMTcZLcS5OQ0iOu44A 提取码:8gdi 复制这段内容后打开百度网盘手机App,操作更方便哦 1. Z ...
Vue第三天 v-model与Vue组件化
Vue第三天 v-model与Vue组件化数据的双向绑定 v-model的使用 v-model的基本使用 Vue中使用v-model指令来实现表单元素和数据的双向绑定. <div id=&qu ...
vue.js 三种方式安装(vue-cli)
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
Vue 里几个重要的指令
Vue 里几个重要的指令 --资源来自黑马程序员 v-text v-html v-on v-show v-if v-bind v-for v-model --资源来自黑马程序员) v-text &l ...
vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...

【Vue案例三】使用v-if指令 / component标签实现组件的切换

通过v-if控制实现

通过component标签实现

【Vue案例三】使用v-if指令 / component标签实现组件的切换相关推荐

最新文章

热门文章