计算属性与方法的区别:
1、方法调用的时候需要加括号,计算属性调用时不需要;
2、方法的结果无缓存,计算属性结果有缓存,只有当数据有变化时才会被调用
<html>
<head>
<script src='vue.js'></script>
</head>
<body>
<div id = 'app'>
<span>原始值:{{message}}</span>
<br><hr><Br>
<!-- 实现字符串的反转 -->
<span>原始方法:{{message.split(' ').reverse().join('-')}}</span>
<br><hr><Br>
<!-- 用方法实现字符串的翻转 -->
<span>用方法实现:{{message_fanzhuan()}}</span>
<br><hr><Br>
<!-- 用计算属性实现字符串的反转 -->
<span>用计算属性实现:{{fanzhuan_message}}</span>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
message:'陕西省 西安市 雁塔区 小寨街道办 小寨商城'
},
methods:{
// 通过入参获取到input输入的内容,再给到message,实现数据的双向绑定
message_fanzhuan(){
return this.message.split(' ').reverse().join('-')
}
},
computed:{
fanzhuan_message(){
return this.message.split(' ').reverse().join('-')
}
}
})
// 计算属性与方法的区别:
// 1、方法调用的时候需要加括号,计算属性调用时不需要;
// 2、方法的结果无缓存,计算属性结果有缓存,只有当数据有变化时才会被调用
</script>
</body>
</html>