vue component组件
2019-01-17 本文已影响0人
水母云
使用vue的component组件实现动态点击按钮功能：
实现效果：单击哪个按钮，则增加一个数值
<!DOCTYPE html>
<html>
<head>
<title>vue按钮</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<button @click="counter++">{{ counter }}</button>',
data: function() {
// 给组件返回一个新的data对象，实现独立
return {
counter: 0
};
}
});
// 挂载
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
