Vue内置的Component标签用于动态切换组件

html

<div id="app">
            <component :is="cut"></component>
            <button @click="current">点击切换</button>
      </div>

js

var classA = {
        template:`<div>状态1</div>`
     };
      var classB = {
        template:`<div>状态2</div>`
     };
      var classC = {
        template:`<div>状态3</div>`
     }
        var vm = new Vue({
            el:"#app",
            data:{
                cut:classA
            },
            methods:{
                current:function(){
                    if(this.cut==classA){
                        this.cut=classB
                    }else if(this.cut==classB){
                        this.cut=classC
                    }else{
                        this.cut=classA
                    }
                }
            }

        })
时间: 2024-11-05 13:03:56

Vue内置的Component标签用于动态切换组件的相关文章

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

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

vue内置的标签(组件)

component:用于动态组件,查看博文vue学习之组件. <component :is="componentId"></component> transition:过渡和动画,查看官网文档进入/离开&列表过渡. <!-- 简单元素 --> <transition> <div v-if="ok">toggled content</div> </transition> tra

通俗易懂了解Vue内置组件keep-alive内部原理

1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件,官网如下介绍: <keep-alive>是Vue中内置的一个抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中.当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 这句话的意思简单来说:就是我们可以把一些不常变动的组件或者需要缓存的组件用<keep-alive&g

php 内置支持的标签和属性

内置支持的标签和属性列表如下: 标签名 作用 包含属性 include 包含外部模板文件(闭合) file import 导入资源文件(闭合 包括js css load别名) file,href,type,value,basepath volist 循环数组数据输出 name,id,offset,length,key,mod foreach 数组或对象遍历输出 name,item,key for For循环数据输出 name,from,to,before,step switch 分支判断输出 n

day12(jsp指令&内置对象&动作标签、JavaBean、EL表达式&函数库)

day12 JSP指令 JSP指令概述 JSP指令的格式:<%@指令名 attr1="" attr2="" %>,一般都会把JSP指令放到JSP文件的最上方,但这不是必须的. JSP中有三大指令:page.include.taglib,最为常用,也最为复杂的就是page指令了. 2 page指令 page指令是最为常用的指定,也是属性最多的属性! page指令没有必须属性,都是可选属性.例如<%@page %>,没有给出任何属性也是可以的!

vue内置指令与自定义指令

一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例如:v-on:click  v-on:keyup 3.v-model:数据双向绑定:用于表单输入等:例如:<input v-model="message"> 4.v-show:条件渲染指令,为DOM设置css的style属性 5.v-if:条件渲染指令,动态在DOM内添加或删除

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="ur

python26 封装 多态 常用的内置函数 `__str__` `__del__` 反射 动态导入模块

今日内容: 1. 封装 2.多态 3. 常用的内置函数 `__str__ `__del__` 4.反射 5.动态导入模块 #1. 封装 ##1.1 什么是封装 ?(what) 对外部隐藏内部的属性,以及实现细节  , 给外部提供使用的接口 注意:封装有隐藏的意思,但不是单纯的隐藏 1.2学习封装的目的. 就是为了能够限制外界对内部数据的访问 1.3python中属性的权限分为两种 1.公开的 ?           没有任何限制 谁都能访问 2.私有的 ?          只有当前类本身能够访

第二十五章 面向对象------封装、内置函数、反射、动态导入

1.封装 什么是封装? 1.对外部隐藏内部的属性,以及实现细节,给外部提供使用的接口 注意:封装有隐藏的意思,但不是单纯的隐藏 学习封装的目的:就是为了能够限制外界对内部数据的访问 python中属性的权限分为两种: 1.公开的 没有任何限制,谁都可以访问 2.私有的 只有当前类本身能狗访问 默认为公共的 为什么要封装? 1.提高安全性 封装属性 2.隔离复杂度 封装方法 一个类中分为两种数据:属性和方法 封装属性 class Student: def __init__(self,name,ag