使用vue的component組件實現(xiàn)動態(tài)點擊按鈕功能:
實現(xiàn)效果:單擊哪個按鈕牵辣,則增加一個數(shù)值
<!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對象洒忧,實現(xiàn)獨立
return {
counter: 0
};
}
});
// 掛載
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>