Vue.js中methods和computed的问题

Question

为什么把图中代码中的部分把computed改成methods就失效了?<div id="app"><!-- <p v-for="(item,i) in items" color="red" :style="style">{{item}}</p>--> <show-item v-for="(item,i) in items" @click.native="items.splice(i,1)" color="red" > {{item}}</show-item></div><script> Vue.component('show-item', { template: '<p :style="style"><slot></slot></p>', props:['color'], computed:{ style(){ return {backgroundColor:this.color}; } } }); new Vue({ el: '#app', props:['color'], data: { items: ['apple', 'peal', 'banana'] } // , // methods: { // style() { // return {backgroundColor:this.color} // } // } })

Answer 1

改为methods之后引用要带括号调用方法才行
:style="style()"
而且是一次性的，color改变不会再改变style追问

是调用methods的属性函数的时候,每次都要带括号吗?

是调用methods的属性函数的时候,每次都要带括号吗?

追答

是的，主动调用methods里的方法必须带括号，但是一些事件监听是当做回调函数传进去的，是不需要带括号的
比如 @click="fun" 这里带不带都行，不带括号是使用触发事件的参数，带是传自定义参数

Answer 2

Vue.js自定义指令