当我添加 mounted()
而非 export default {
components: {
MainLayout
},
mounted(){
var x = document.getElementById('homeTabPanes');
// x.style.background = "blue";
console.log("check the value of x", x);
}
}
时会抛出错误
CString
答案 0 :(得分:3)
答案 1 :(得分:2)
来自docs
..计算属性根据其依赖项进行缓存。计算属性仅在其某些依赖项发生更改时才会重新计算。
如果要缓存数据,另一方面使用Computed属性mounted
是一个生命周期挂钩,一旦Vue实例 <,就会调用该方法在DOM上安装 。
答案 2 :(得分:0)
模板内表达式非常方便,但它们仅用于简单操作。在模板中加入太多逻辑可能会使它们变得臃肿且难以维护。 这就是为什么对于任何复杂的逻辑,你应该使用计算属性。
NaN
看下面的js:
<div id="reverseMessageContainer">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage的 getter函数: 您可以打开控制台并自己玩示例vm。 vm.reversedMessage的值始终取决于vm.message的值。
var vm = new Vue({
el: '#reverseMessageContainer',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
为了更好地理解,您可以访问 https://vuejs.org/v2/guide/computed.html