vue动态切换组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="cname=‘login‘">登录</a>
<a href="#" @click.prevent="cname=‘register‘">注册</a>
<!-- component是一个占位符，:is属性，显示组件-->
<!--<component :is="‘login‘"></component>-->
<component :is="cname"></component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script>
Vue.component(‘login‘,{
template:‘<h3>登录组件</h3>‘
})
Vue.component(‘register‘,{
template:‘<h3>注册组件</h3>‘
})
var vm = new Vue({
el:‘#app‘,
data:{
cname:‘login‘
},
methods:{

}
})
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/qiyc/p/10301465.html

时间： 2024-10-10 07:02:48

vue动态切换组件的相关文章

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

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:`<d

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

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

vue2.0 动态切换组件

组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../vue2.2.js"></script> <t

【Html】Vue动态插入组件

html: <div id="app"> <p>{{ message }}</p> <button @click="add('a-component', '我是A')">添加A组件</button> <button @click="add('b-component', '我是B')">添加B组件</button> <component :is="i

vue动态选择组件

有时候会用到同一位置因为条件不同而使用不同组件,vue中可以用 :is 1 <template> 2 <div class="RuleContent"> 3 <el-container> 4 <el-header>{{benginLable}}</el-header> 5 <el-main> 6 <component :is="ruleMsg" :id="treeid"

vue动态切换页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> ul li{ list-style: none; display: inline-blo

Vue.js说说组件

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创