Vue之component 标签

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

实例：

1.我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

2.我们在构造器的components选项里加入这三个组件。

3.我们在html里插入component标签，并绑定key数据，根据key的值不同，调用不同的组件。

这就是我们的组件标签的基本用法。我们提高以下，给页面加个按钮，每点以下更换一个组件。

<!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="/vue.js"></script>
</head><body><div id="app"><component :is="key"></component></div><script>var componentA = {template: `<div style="color:red">我是A组件</div>`}var componentB = {template: `<div style="color:blank">我是B组件</div>`}var componentC = {template: `<div style="color:pink">我是C组件</div>`}var app = new Vue({el: '#app',components: {"comA": componentA,"comB": componentB,"comC": componentC},data:{key:'comB'}})</script>
</body></html>

vue中 'is' 关键字用来动态切换组件

想学习更多关于vue的知识可以点击链接学习

Vue之component 标签相关推荐

【Vue案例三】使用v-if指令 / component标签实现组件的切换
前面介绍了Vue中组件的创建方式和data及methods属性,本文我们来做一个Vue组件的切换案例,效果如下: 这个效果相信大家都能搞定,本文希望通过这个案例来加深一下对组件的使用.我们通过前面介绍 ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
vue多html标签,Vue实现多标签选择器
本文实例为大家分享了vue实现多标签选择器展示的具体代码,供大家参考,具体内容如下实现效果实现代码 document .not-active { display: inline-block; fo ...
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
html component标签,Component 标签
[TOC] ``标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件 1. 我们先在构造器外部定义三个不同的组件,分别是componentA,componen ...
Vue--动态组件(component标签)的用法
原文网址:Vue--动态组件(component标签)的用法_IT利刃出鞘的博客-CSDN博客简介说明本文介绍Vue的动态组件的用法. 在Vue中,可以通过component标签的is属性动态指 ...
html component标签,(九)Component标签
本节知识点组件标签模板标签用的`` 概述标签是vue自定义的标签.可以动态绑定我们的组件,根据数据不同更换不同的组件 componet标签 Title 点击我变换 var jsona = { t ...
vue中img标签onerror事件
vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件,并防止闪图 <img type="image/x-icon" :sr ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...

Vue之component 标签

Vue之component 标签相关推荐

最新文章

热门文章