7 vue 计算属性
2020-09-09 本文已影响0人
滔滔逐浪
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01计算属性的基本使用</title>
</head>
<body>
<div id="app">
<h2> {{firstName }} {{lastName}} </h2>
<h2> {{firstName + ' ' + lastName}} </h2>
<h2>{{ getFullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
firstName: 'lebron',
lastName: 'James'
},
methods: {
getFullName() {
return this.firstName + " " + this.lastName;
}
},
//计算属性
computed: {
fullName: function () {
return this.firstName + " " + this.lastName;
}
},
})
</script>
</body>
</html>
计算属性的复杂属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02计算属性的复杂操作</title>
</head>
<body>
<div id="app">
<h2> {{message}}</h2>
<h2>总价格:{{totalprice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
books: [{id: 1, name: "55435", price: 11491}, {id: 1, name: "555", price: 119}, {
id: 11,
name: "55445",
price: 1149
}, {id: 12, name: "55235", price: 149}]
},
computed:{
totalprice:function (){
let result=0;
for(let i=0;i<this.books.length;i++){
result+=this.books[i].price
}
for (let i in this.books) {
this.books[i].price
}
return result;
}
}
})
</script>
</body>
</html>
set/get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2> {{message}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
firstName: 'kobe',
lastName: 'Bryant'
},
computed:{
/* fullName: function (){
return this.firstName+''+this.lastName
}*/
fullName:{
set:function (){
},
get:function (){
return this.firstName+ '' +this.lastName;
}
}}
})
</script>
</body>
</html>
