<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js"></script>
<script>
window.onload=function (){
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false;//阻止vue启动时生成生产消息
new Vue({
el:"#container",
data:{
msg:"Holle Word"
},
computed:{//计算属性必须是个函数
// msg2:"你好！"//错
msg2:()=>{//对
return "你好！"
},
revresMsg:function () {
return this.msg.split(" ").reverse().join();
}
},
methods:{
},
})
}
</script>
</head>
<body>
<div id="container">
<h2 class="">{{msg}}</h2>
<h2>{{msg2}}</h2>
<hr>
<!--对数据进行处理在显示-->
<h2>{{revresMsg}}</h2>
</div>
</body>
</html>
