<!DOCTYPE html>
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 返回一个全名和书的总价格 -->
<h2>{{this.firstname}} {{this.lastname}}</h2>
<!-- 1.最简单直接的方式 -->
<h2>{{fullname}}</h2>
<!-- 2.用计算属性的方式 -->
<h2>{{getfullname()}}</h2>
<!-- 3.用函数的方式 -->
<!-- 计算属性方式和定义函数方式的区别:
函数:定义了几次就调用几次函数;
计算属性:定义了多次会查看计算属性函数里的内容是否有变化,
没变化直接从缓存中拿数据,相同的定义多次其实只调用了一次。 -->
<h2>{{totalprice}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue(
{el:"#app",
data:{
firstname:'shao',
lastname:'qiudan',
books:[
{id:110,name:'深入理解计算机远离',price:119},
{id:111,name:'我和世界安静地坐着',price:119}
]
},
methods:{
getfullname:function(){
return this.firstname+' '+this.lastname;
},
},
computed:{
// 插值表达式的属性值实在是太复杂了, 一般用名词表示属性值,不需要调用的时候加()
// 正常写法,通常set方法不用,因为不想被轻易改变值
fullname:{
set:function(newvalue){
//从控制台获取到要设置的名字
names=newvalue.split(' ');
this.firstname=names[0];
this.lastname=names[1];
},
get:function(){return this.firstname+' '+this.lastname}
},
// 简单写法,直接省略set方法
// fullname:function(){
// return this.firstname+' '+this.lastname;
// },
totalprice:function(){
let result=0;
for(let i=0;i<this.books.length;i++){
result+=this.books[i].price;
}
return result;
}
}
})</script>
</body>
</html>
(2)vue计算属性代码练习
最新推荐文章于 2024-03-08 21:49:13 发布