<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>什么是计算属性</title>
</head>
<body>
<div id="app">
{{ reversedText }}
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
text:'123,456'
},
computed:{
reversedText:function(){
// 这里的this指向的是当前的Vue 实例
return this.text.split(',').reverse().join(',');
<!--所有的计算属性都是以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果-->
}
}
})
</script>
</body>
</html>
计算属性.png
网友评论