基本使用
.<template>
<div>
<p>{
{
msg }}</p>
<!-- 输出hello -->
<input type="text" v-model="msg" />
<!-- 绑定v-model后,只要数据发生变化就会自动触发计算属性 -->
<p>{
{
getmsg }}</p>
<!-- 像属性一样使用,输出hello-->
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello",
};
},
computed: {
getmsg() {
// 依赖项:就是计算属性中通过this来使用的数据
let temp = this.msg;
return temp;
},
},
};
</script>
<style>
</style>
效果
大量使用
<p>{
{
getmsg }}</p>
<p>{
{
getmsg }}</p>
<p>{
{
getmsg }}</p>
<p>{
{
getmsg }}</p>
<p>{
{
getmsg }}</p>
效果
如果用methods方法大量调用
methods: {
getmsg() {
// 依赖项:就是计算属性中通过this来使用的数据
let temp = this.msg;
console.log(1);
return temp;
},
},
<p>{
{
getmsg() }}</p>
<p>{
{
getmsg() }}</p>
<p>{
{
getmsg() }}</p>
<p>{
{
getmsg() }}</p>
<p>{
{
getmsg() }}</p>
效果
总结:
作用:1.可以监听指定的属性值的变化,进而做出处理,并返回处理的结果
2.它可以监听计算属性中依赖项的变化,如果依赖项发生变化,就会自动的调用计算属性
a:依赖项:就是计算属性中通过this来使用的数据
b:可以将同一函数定义为一个方法methods,两种方式最终结果是完全一样的.不同的是计算属性是基于它们的响应式依赖进行缓存,意思是如果计算属性中的依赖项没有发生变化,那么多次调用计算属性,并不会真正的执行计算属性,而是使用第一次计算的缓存结果,这样在页面大量使用的情况下,可以提升处理效率
看起来是函数,用起来是属性
实用示例:使用计算属性筛选数据
需求:在输入框输入关键字,匹配数据.
思路:1.v-model动态获取搜索框数据
2.filter或for方法匹配
3.渲染
计算属性本质返回的是数组,所以可以遍历
<template>
<div id="app">
<div class="add">
<!-- 1.1 v-model获取搜索框内容 -->
品牌名称:<input
type="text"
placeholder="请输入搜索条件"
v-model="userkey"
/>
</div>
<div>
<table class="tb">
<tbody>
<tr>
<th>编号</th>
<th>品牌名称</th>
</tr>
<!-- 3.渲染 -->
<tr v-for="(value, index) in getlist" :key="index">
<td>{
{
value.id }}</td>
<td>{
{
value.name }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 直观观察计算属性变化 -->
<p>{
{
getlist }}</p>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
id: "",
name: "",
},
// 1.获取搜索框内容
userkey: "",
//数组
list: [
{
id: 1,
name: "QQ",
},
{
id: 2,
name: "WW",
},
{
id: 3,
name: "EE",
},
],
};
},
computed: {
// 2.计算属性
getlist() {
//将搜索框的内容匹配数组,执行回调函数,如果回调函数执行结果返回了true,存入filter创建的空数组中,返回
return this.list.filter((v) => {
return v.name.toUpperCase().indexOf(this.userkey.toUpperCase()) != -1;
});
// console.log(this.userkey);
// let arr = [];
// for (let i = 0; i < this.list.length; i++) {
// if (
// this.list[i].name.toUpperCase().indexOf(this.userkey.toUpperCase()) !=
// -1
// ) {
// arr.push(this.list[i]);
// }
// }
// return arr;
},
},
};
</script>
<style>
</style>
效果
