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系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
随机推荐
- 杂项-Java：JBoss
ylbtech-杂项-Java:JBoss 是一个基于J2EE的开放源代码的应用服务器. JBoss代码遵循LGPL许可,可以在任何商业应用中免费使用.JBoss是一个管理EJB的容器和服务器,支持E ...
- 《MuseGAN: Multi-track Sequential Generative Adversarial Networks for Symbolic Music Generation and Accompaniment》论文阅读笔记
出处:2018 AAAI SourceCode:https://github.com/salu133445/musegan abstract: (写得不错 值得借鉴)重点阐述了生成音乐和生成图片,视频 ...
- 洛谷 P4552 [Poetize6] IncDec Sequence【差分+脑洞】
一看区间操作,很容易想到差分 所以就是先差分,然后为了保证最小步数,把政府差分抵消,也就相当于原数组区间加减 第二问,因为差分数组抵消之后不为0就需要使用n+1的虚拟位置,而这个的值其实没有,所以我们 ...
- bzoj 2525: [Poi2011]Dynamite【二分+树上贪心】
一眼二分.然后重点是树上贪心部分 长得像dp一样,设mn为子树内已炸点的最浅点,mx为子树内没有炸并且需要炸的最深点,然后转移直接从子树继承即可 然后是判断当前u点是否需要炸,当mx[u]+mn[u] ...
- 洛谷 P4012 深海机器人问题 【最大费用最大流】
和火星那个有点像,但是这个价值直接在路径上,不用拆点,对于每条价值为w的边(i,j),连接(i,j,1,w)(i,j,inf,0),表示价值只能取一次,然后连接源点和所有出发点(s,i,k,0),所有 ...
- 《windows核心编程系列》十五谈谈windows线程栈
谈谈windows线程栈. 当系统创建线程时会为线程预订一块地址空间区域,注意仅仅是预订.默认情况下预定的这块区域的大小是1MB,虽然预订这么多,但是系统并不会给全部区域调拨物理存储器.默认情况下,仅 ...
- 201 Bitwise AND of Numbers Range 数字范围按位与
给定范围 [m,n],其中 0 <= m <= n <= 2147483647,返回此范围内所有数字的按位与(包含m, n两端点).例如,给定范围 [5,7],您应该返回 4. 详见 ...
- [转]ASP.NET MVC 3 Application Upgrader
本文转自:http://aspnet.codeplex.com/releases/view/59008 Recommended Download ASP.NET MVC 3 Applicat ...
- .net 字符串和JSON格式的互换
近期又做了个问卷调查,问卷调查一次性要保存一二十个题目和答案!所以嘞,博主为了偷懒,就直接把答卷内容保存成了Json格式! 好处当然是很多啦! 只需一个字段就能保存整个答卷的内容! 想想都刺激!哈哈~ ...
- tuple元组创建单元素
创建tuple单元素,一定要在结尾时添加一个逗号(,)解:如果不加逗号,哪怕是使用tuple()正确的创建元组,也会有歧义,它会把创建tuple元组的单元素,当成一个普通的输出语句结果列:如下,错误的 ...