<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{msg.split('').reverse().join('')}}</div>
<div>{{reverseString}}</div>
</div>
<script src="./vue/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello"
},
methods:{},
computed:{
reverseString:function(){
console.log(this.msg.split(''));
console.log(this.msg.split('').reverse());
return this.msg.split('').reverse().join('');
}
}
});
/**
* 可以简化计算
*
* 计算属性和方法的区别
* - 计算属性是基于他们的依赖进行缓存（比较耗时的计算，可以节省时间）
* - 方法不存在缓存
*/
</script>
</body>
</html>
网友评论