首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 vue 组件实例代码分享
[ 淡淡的风 ] 发布于 : 2018-09-20  浏览 :  次

vue 组件实例代码分享

<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
{{test}} <my-button color="red" v-on:zoom="zoomNow"></my-button>
<style type="text/css"> </style> <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> Vue.component('my-button',{ props:['color'], data : function(){ return { btnName : "按钮名称" }; }, template : '<button type="button" :style="{color : color}" v-on:click="$emit(\'zoom\', \'hcoder\')">{{btnName}}</button>' }); var vm = new Vue({ el : "#test", data:{ test : "hi...", fontSize : '50px' }, methods : { zoomNow : function(var1){ console.log(var1) this.fontSize = '200px' } } }); </script> </body> </html>


教程更新
More...