vue 组件用法
<!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 组件用法的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件的基础用法（火柴）
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
- Vue组件的继承用法
Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...
- Vue组件的is具体用法
1.为什么要使用is 在vue的官网组件部分中,有明确的描述:当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因 ...
- vue组件讲解（is属性的用法）
什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
随机推荐
- 腾讯API
相关文档: API列表 腾讯开放平台联调工具集 公共返回码说明 SDK下载
- property_get 与 property_set 的返回值（转载）
转自:http://wzw19191.blog.163.com/blog/static/13113547020103218265162/ /* property_get: returns the le ...
- linux更改用户名，域名（转载）
转自:http://huangro.iteye.com/blog/365975 1. 我们在root权限下,使用命令: usermod -l new_user_name old_user_name 即 ...
- Java标准输入流system.in报错: java.util.NoSuchElementException解决方法
我的程序大概是这样的: main()主函数里面,调用两个自定义的方法,这里我们称之为方法a和方法b: 主函数main()里有一个:Scanner scanner = new Scanner(Syste ...
- Golang bash alias 自动配置GOPATH并运行项目
BASH代码: source ~/.bash_profile; export GOPATH=$GOPATH:`cd ..; pwd`; echo -e "* GOPATH: $GOPATH ...
- MYSQL 配置远程连接
例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话. GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY ...
- [Usaco2006 Open]The Climbing Wall 攀岩
Description One of the most popular attractions at the county fair is the climbing wall. Bessie want ...
- Miller&&Pollard HDOJ 4344 Mark the Rope
题目传送门 题意:一个长为n(n<2^63)的管子,在管子上做标记,每隔L个长度单位做一个标记,从管子头端开始,保证最后一次标记恰好在管子的尾端.让你找出有多少个这样的L(L<n),且他们 ...
- 题解报告：hdu 2544 最短路
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2544 Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t ...
- Retinex系列之McCann99 Retinex 分类： 图像处理 Matlab 2014-12-03 11:27 585人阅读 评论(0) 收藏
一.McCann99 Retinex McCann99利用金字塔模型建立对图像的多分辨率描述,自顶向下逐层迭代,提高增强效率.对输入图像的长宽有 严格的限制,要求可表示成 ,且 ,. 上述限制来源于金 ...