Vue自定义组件

港控/mmm° 2022-07-12 14:51 227阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>vue-component</title>
    		<script type="text/javascript" src="js/mui.js" ></script>
    		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
    		<script type="text/javascript" src="js/vue.js" ></script>
    		<script type="text/javascript">
             var vue;
             $(function(){
             	//自定义组件
             	Vue.component('custom-template',//组件名
             	   {
    	         	props:['param'],//组件接受外部参数
    	        	template:'<li>{
       {param.text}}</li>'//模板
             	});
             	//初始化vue
             	vue = new Vue({
             		el:"#app",
             		data:{
             			customList: [
    						    { text: 'java' },
    						    { text: 'Object c'},
    						    { text: 'c++' }
    						    ]
             		}
             	});
             });
    		</script>
    
    	</head>
    
    	<body>
    		<div id="app">
          	<ol>
            <custom-template v-for="item in customList" v-bind:param="item"></custom-template>      		
          	</ol>
          	</div>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue之自定义组件

引言在开发领域，我们经常会碰到列表这一类的业务，比如新闻列表，商品列表、活动列表等等。为了不重复造轮子，机智的我们总想把功能模块块，抽象出一个个的小组件，之后开发...

爱被打了一巴掌/ 2024年04月18日 14:43/ 0 赞/ 3 阅读

相关 vue 全局自定义组件 components

创建组件在/components目录下创建tabBar.vue <template> <div class="barBar-container">

╰半橙微兮°/ 2022年12月10日 01:20/ 0 赞/ 153 阅读

相关【vue】vue实现自定义组件v-model

> `前言` 转载自：[https://blog.csdn.net/liub37/article/details/83382205][https_blog.csdn.net_

Myth丶恋晨/ 2022年10月06日 11:55/ 0 赞/ 142 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 221 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 216 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 228 阅读

相关自定义vue日历组件

今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示： ![640_wx_fm

短命女/ 2022年05月27日 03:30/ 0 赞/ 419 阅读

相关【Vue】Quill Editor自定义组件

最近小编在做案例展示，在富文本编辑器这里花了不少时间，还好有前端大哥帮忙，这才拨开云雾见月明。对于图文信息，有多种编辑器，我选用的是Quill Editor。对vue的使

矫情吗；*/ 2022年01月06日 11:29/ 0 赞/ 528 阅读

相关 vue 通讯录自定义组件

在线demo：[http://tangyupeng.top/dist/index.html\/phone][http_tangyupeng.top_dist_index.htm

Myth丶恋晨/ 2021年09月16日 13:12/ 0 赞/ 435 阅读

相关 vue 自定义内置组件 select

1.整合了第三方 jQuery 插件 (select2) ![20180409105304732][] <!DOCTYPE html> <html

墨蓝/ 2021年09月15日 04:54/ 0 赞/ 908 阅读