模板内的表达式常用于简单的运算,当其过长或者逻辑复杂时,会难以维护,这时应该使用Vue的计算属性来解决这个问题。
示例代码
<template>
<div>
{{cleared}}
</div>
</template>
<script>
export default {
name: "Computed",
data() {
return {
msg: "Hello ,computed ,!"
};
},
computed: {
cleared: function() {
return this.msg.split(",").join('');
}
}
};
</script>
每一个计算属性都包含了一个getter和一个setter。大部分情况我们只用到getter。