vue --- 使用component的 :is属性切换标签页

点击对应的标签,下面切换至对应的模板…

// 说明
<component :is="name"></component>
// 相当于把id为name的组件放到对应的位置

总体代码如下:

<!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"><script src="../node_modules/vue/dist/vue.js"></script>
</head><body><div id="app"><a href="" @click.prevent="name='login'">登录</a><a href="" @click.prevent="name='register'">注册</a><a href="" @click.prevent="name='forget'">忘记密码</a><component :is="name"></component></div><template id="tmp1"><h3>登录</h3></template><template id="tmp2"><h3>注册</h3></template><template id="tmp3"><h3>忘记密码</h3></template><script>Vue.component('login', {template: '#tmp1'})Vue.component('register', {template: '#tmp2'})Vue.component('forget', {template: '#tmp3'})const vm = new Vue({el: '#app',data: {name: 'login'},methods: {}})</script>
</body></html>// 注意vue.js的导入.

切换效果:
传送门

// html
<transition mode="out-in"><component v-bind:is="name"></component>
</transition>// 把需要动画的组件用transition包裹起来

// css
<style>.v-enter,.v-leave-to{opacity: 0,transform: translateX(150px);}.v-enter-active,.v-leave-active {transition: all 0.5s ease;}
</style>

vue --- 使用component的 :is属性切换标签页相关推荐

vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
Vue(ES6)中的data属性为什么不能是一个对象？
以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例.如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
Vue Class Component详解
类组件 1. @component 使用@Component注解,将类转化为 vue 的组件,以下是一个示例 import vue from 'vue' import Component from ' ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
VUE基本语法1-插值属性绑定
.1 插值绑定插值绑定是Vue中最常见.最基本的语法,绑定的内容主要有文本插值和HTML插值两种文本插值文本插值的方式十分简单,只要用双大括号(Mustache语法)将要绑定的变量.值.表达式括 ...
vue中style的scoped属性的设计方式
vue中style的scoped属性这里是怎实现的呢? scoped三条渲染规则给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性在每句css选 ...

vue --- 使用component的 :is属性切换标签页

vue --- 使用component的 :is属性切换标签页相关推荐

最新文章

热门文章