组件data使用函数是每次都会返回一个新对象，提高组件的复用性
组件data存放案例：
<body>
<div id="comb_data">
<!-- 三个不会用同一个对象 -->
<cpnc3></cpnc3>
<cpnc3></cpnc3>
<cpnc3></cpnc3>
</div>
<template id="cpn3">
<div>
<h2>你选择的数字是:{{counter}}</h2>
<button type="button" @click="increment">+</button>
<button type="button" @click="decrement">-</button>
</div>
</template>
<script type="text/javascript">
//让它相互影响就把obj放入data 让他返回同一个对象
// const obj = {
// counter:0
// }
Vue.component('cpnc3',{
template:'#cpn3',
//使用函数每次都会返回一个新的对象不会相互影响
data(){
return{
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
}
)
const vm=new Vue({
el:"#comb_data"
})
</script>
</body>
1207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
