vue2.0 动态切换组件

组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../vue2.2.js"></script>
    <title>component-4</title>
</head>
<body>
    <h1>component-4</h1>
    <hr>
    <div id="app">
       <component v-bind:is="who"></component>
       <button @click="changeComponent">changeComponent</button>
    </div>

    <script type="text/javascript">
        var componentA={
            template:`<div style="color:red;">this componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">thiscomponentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">this componentC</div>`
        }

        var vm=new Vue({
            el:‘#app‘,
            data:{
                who:‘componentA‘
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            },
            methods:{
                changeComponent:function(){
                    if(this.who==‘componentA‘){
                        this.who=‘componentB‘;
                    }else if(this.who==‘componentB‘){
                        this.who=‘componentC‘;
                    }else{
                        this.who=‘componentA‘;
                    }
                }
            }
        })
    </script>
</body>
</html>
时间: 2024-10-10 07:02:54

vue2.0 动态切换组件的相关文章

vue2.0动态添加组件

方法一.<template> <input type="text" v-model='componentName'> <button @click='add'>click me to add a component</button> </template> <script> // 引入要添加的所有组件 import component1 from './components/component1.vue' impo

Vue2.0的通用组件

饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍

饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

用webpack2.0构建vue2.0单文件组件超级详细精简实例

npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本 npm install --save-dev babel-core babel-loader babel-preset-es2

一款基于vue2.0的分页组件---写在页面内

通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 1 .page { 2 font-weight: 900; 3 height: 40px; 4 text-align: center; 5 color: #888; 6 margin: 20px auto 0; 7 background: #f2f2f2; 8 } 9 10 .pagelist { 11

Vue中is属性的用法 可以动态切换组件

is 是组件的一个属性,用来展示组件的名称 is和component联用哈 <component :is="comName"> vue提供了component来展示对应的组件名称 compont是一个占位符,is这个属性,用来展示对应的组件名称 三个子组件 <template> <div> <h2>我是登录组件</h2> </div> </template> <template> <d

使用is动态切换组件

<template> <div class="dashboard-container"> <!-- 根据角色,切换组件 --> <component :is="currentRole" /> </div> </template> <script> import { mapGetters } from 'vuex' import adminDashboard from './admin

Android中实现动态切换组件背景的操作

这个也是昨天学习用到的,总结下思路吧,因为这个知识点以后绝对会再次用到. 目的:我要在软件中动态的选择组件背景,系统皮肤,自定义吐司背景等. 实现思路:要用到安卓中的SharedPrefence的功能,在设置里面写一个控件,设置一个点击监听器,点击的时候显示一个Alert选择弹窗,让你进行选择,对这个弹窗再设置一个点击监听器(onItemListener),点击到具体某个的时候,把对应的点击id保存到sahredprefence里面去,这样,其他地方就可以从这里取得设置里选择的值,进行动态个性化

vue2.0 tab切换几种方式

第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作) <template> <div id="app"> <ul> <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}"> {{tab.type}} </li> <