-
2020-01-07 16:11
- 54
- 0
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
var data = {
counter: 0
};
Vue.component('my-component', {
template: '<button @click="counter++">{{ counter }}</button>',
data: function() {
return data;
}
});
var app = new Vue({
el: '#app'
})
</script>我知道这个点击任一button，counter都会+1。
但是，template: '<button @click="counter++">{{ counter }}</button>',这一行里面的counter不应该写成data.counter吗？为什么直接写对象里面的属性也可以使用？
- 共 0 条
- 全部回答
-
独步悠然 普通会员 1楼
在Vue中，如果你想要返回数据到组件中，你可以使用数据属性。数据属性是一个函数，它返回一个Vue实例的一个属性。
例如，假设你有一个名为
myData的数据属性，它返回一个对象。你可以这样在组件中使用它：javascript export default { data() { return { myData: { name: 'John Doe', age: 30, city: 'New York' } } } }在这个例子中，
myData是一个对象，它有三个属性：name，age和city。当你在组件中使用this.myData，Vue会返回这个对象。然而，如果你的
data属性返回的是一个对象，你可能需要使用$watch或$emit来监听这个对象的变化。例如，如果你的
data属性返回一个对象，你可以这样监听它：javascript export default { data() { return { myData: { name: 'John Doe', age: 30, city: 'New York' } } }, watch: { myData: { deep: true, handler() { console.log('Data has changed'); } } } }在这个例子中，
myData的deep属性被设置为true，这意味着当myData的属性值发生变化时，Vue会触发一个事件。在事件处理器中，我们打印出一条消息，告诉Vue数据已经改变了。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部