<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../assets/js/vue.js"></script>

    <title>component</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;">I'm componentA</div>`

        }

        var componentB={

            template:`<div style="color:green;">I'm componentB</div>`

        }

        var componentC={

            template:`<div style="color:pink;">I'm componentC</div>`

        }

        var app=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>

vue 组件用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. Vue组件的基础用法（火柴）

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

  3. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

  4. Vue组件的is具体用法

    1.为什么要使用is 在vue的官网组件部分中,有明确的描述:当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因 ...

  5. vue组件讲解（is属性的用法）

    什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次 ...

  6. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  7. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  8. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  9. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

随机推荐

  1. Vue.js：安装node js到构建一个vue并启动它

    ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...

  2. Nvidia GPU 算力查询

    GPU Compute Capability Tesla K80 3.7 Tesla K40 3.5 Tesla K20 3.5 Tesla C2075 2.0 Tesla C2050/C2070 2 ...

  3. JSP 注释的详解及简单实例

    转自:https://www.jb51.net/article/124727.htm JSP 注释的详解及简单实例 一 三种格式 二 举例 ? 1 2 3 4 5 6 7 8 9 10 11 12 1 ...

  4. webpack 4.0 相关

    Webpack 4.0发布了!! https://www.jianshu.com/p/3a13f1b37300 webpack详解 https://juejin.im/post/5aa3d2056fb ...

  5. 切换或者用户登录时 出现 显示 -bash-4.2$ 问题 的解决

    集群的普通用户在登录用户或者切换用户时,出现 -bash-4.2$ 的状态: [goldwind@TR-OS-DB 9.4]#su postgres bash-4.2$ 原因:在linux下通过use ...

  6. python pep8 命令规范

    命名规范:总体原则,新编代码必须按下面命名风格进行,现有库的编码尽量保持风格.1 尽量单独使用小写字母‘l’,大写字母‘O’等容易混淆的字母.2 模块命名尽量短小,使用全部小写的方式,可以使用下划线. ...

  7. [POI2009]Kon

    Description 火车沿途有N个车站,告诉你从每一站到每一站的人数,现在查票员只能查K次票,每次查票可以控制目前在车上的所有乘客的车票.求一个查票方案,使得控制的不同的乘客尽量多. (显然对同一 ...

  8. “玲珑杯”第七届郑州轻工业学院ACM程序设计大赛 ------- D：社交网络

    题目链接: http://acm.zzuli.edu.cn/problem.php?cid=1099&pid=3 题目大意: 国语题目,题意显而易见, 解题思路: 只需要对每一个节点进行假设, ...

  9. 198 House Robber 打家劫舍

    你是一个专业的强盗,计划抢劫沿街的房屋.每间房都藏有一定的现金,阻止你抢劫他们的唯一的制约因素就是相邻的房屋有保安系统连接,如果两间相邻的房屋在同一晚上被闯入,它会自动联系警方.给定一个代表每个房屋的 ...

  10. Java编程思想总结笔记Chapter 3

    本章需要总结的不多,但细节的东西需要注意,有些很容易遗忘. 第三章 目录: 3.1 更简单的打印语句 3.2 使用Java操作符 3.3 优先级 3.4 赋值 3.5 算数操作符 3.6 自动递增和递 ...