1.计算属性的作用,可以拼接字符串或是计算页面中的数值
1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue计算属性</title>
</head>
<body>
<div id="app">
<!-- 原始的拼接方法 -->
原始拼接={{title + "---" + des}}
<hr>
<!-- 使用计算属性拼接的方法 -->
使用计算属性拼接={{titDes}}
<hr>
<!-- 方法中的拼接 -->
方法中的拼接={{tit2()}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
title: "Vue学习",
des: "web前端开发"
},
//methods中的方法,每一次数据变化都会导致数据重新加载!
methods: {
tit2(){
return this.title+"==="+this.des
}
},
//计算属性(没必要每次有渲染)
computed: {
//也是一个方法,但必须要有一个返回值
titDes(){
return this.title+"~~~"+this.des
}
}
})
</script>
</body>
</html>