vue 组件用法
2024-08-23 14:25:32
<!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>
最新文章
- [转载] SSH入门学习基础教程
- php 三种数组
- ZooKeeper的Znode剖析
- PM2实用入门指南
- 微信公众号";赞赏";功能来了 觉得不错就给作者打个赏吧
- iOS数据存取和对象序列化
- unity, monoDevelop ide 代码提示不起作用的解决方法
- TestNG官方文档中文版(2)-annotation(转)
- Ubuntu Server 14.04在VMware安装的一些事儿
- mongodb菜鸟整理 2 C#Driver使用
- Python面试常见的问题
- CSS3下的渐变文字效果实现
- 第一个微信小程序踩的几个小坑
- [UE4]地图缩放
- 非正常关闭vi编辑器时会生成一个.swp文件
- 持续集成(1)gitlab的安装
- 使用 RamMap 清理内存 How to Use RamMap to Empty System Working Set
- 第六周PSP&;进度条
- Vue里边接口访问Post、Get
- windows 如何查看端口占用进程ID 进程名称 强制结束进程
热门文章
- bzoj4031
- UVa 1213 Sum of Different Primes (DP)
- python 高阶函数三 filter()和sorted()
- bzoj 4784: [Zjoi2017]仙人掌【tarjan+树形dp】
- [Swift]扩展String类:实现find()查找子字符串在父字符串中的位置
- C# DateTime.Now 详解
- [SRM625 Div1 Hard] Seatfriends
- [USACO 2012 Feb Gold] Cow Coupons【贪心 堆】
- Hibernate3的hbm文件错误引用dtd文件导致项目无法启动问题处理
- ArrayList、HashMap 与 员工类(程序员、经理的结合使用) 相当于集合与继承的总结