源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue computed计算属性</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- <span>分数 {{ scroe >= 90 ? "优秀生" : "一般的学生" }}</span> -->
<!-- <span>{{ level }}</span> -->
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
<span>{{ username }}</span>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
scroe:95,
firstname:"xiaochuan",
lastname:"sun"
},
//简单的数据可以使用上面 html 中的 三元写法 但是复杂的话就得需要使用 computed 方法来计算了
computed:{
level:function() {
if(this.scroe >= 90){
return "优秀生";
}
return "一般的学生 ";
},
username:function(){
return "全名为【" + this.firstname + this.lastname + "】";
}
}
})
</script>
</body>
</html>
