计算属性是computed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="jdg">
<!--
<ul>
<li v-for="it in S10" v-on:click="">{{it}}</li>
</ul>
-->
<h1>{{fullName}}</h1>
<p>{{GfullName()}}</p>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#jdg',
data: {
S10: ['JDG', 'TES', 'SN', 'LGD'],
beRed:[false,false,false,false],
firstName:'涂',
lastName:'博闻'
},
computed:{
fullName:function(){
return this.firstName+this.lastName;
}
},
methods: {
GfullName:function(){
return this.firstName+this.lastName;
}
}
})
</script>
</body>
</html>
我们在需要将数据对象中数据运算之后显示的情况下,既可以使用methods来定义函数返回值,然后使用{{}}来解析运算函数,也可以定义computed计算属性,这样不用加括号,使程序更有可读性。
计算属性的setter和getter方法:
一般的计算属性都会有set和get方法,但是由于一般set方法不会被使用,所以像上面那样定义计算属性,在调用时就会直接调用属性的get方法。set方法一般是计算属性被修改之后会调用的方法,get方法是获取计算属性时调用的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="jdg">
<!--
<ul>
<li v-for="it in S10" v-on:click="">{{it}}</li>
</ul>
-->
<h1>{{fullName}}</h1>
<p>{{GfullName()}}</p>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#jdg',
data: {
S10: ['JDG', 'TES', 'SN', 'LGD'],
beRed: [false, false, false, false],
firstName: '涂',
lastName: '博闻'
},
computed: {
fullName: {
get: function () {
return this.firstName + this.lastName;
},
set: function (newValue) {
const name=newValue.split(' ');
this.firstName=name[0];
this.lastName=name[1];
alert("修改了名字");
}
}
},
methods: {
GfullName: function () {
return this.firstName + this.lastName;
}
}
})
</script>
</body>
计算属性和 methods方法的区别:
计算属性会被浏览器缓存起来,如果值没有改变就不会被调用函数,但是如果是methods方法来调用,无论值有没有改变,只要调用一次,函数就会被调用一次,程序运行速度会很慢。