vue基础（三）——vue实例化对象
摘要今天来分享一些vue对象中最常见的几个属性。其实前两天我们已经学过两个属性了，分别是el和data。他们的意思分别是挂载的元素和数据集合。今天我们学习
·
摘要
今天来分享一些vue对象中最常见的几个属性。其实前两天我们已经学过两个属性了，分别是el和data。他们的意思分别是挂载的元素和数据集合。今天我们学习我们平时最常用的Methods方法合集 和Computed 计算属性。
1、Methods方法合集
Methods和它本身的意思一样是用来定义方法的，简单来说就是来定义我们js开发时定义的函数的。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div :class="getClass()">{{ message }}</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "222222",
active: "aaaaa",
aaa: "bbb"
},
methods: {
getClass: function() {
console.log(this)
return [this.active, this.aaa];
}
},
});
</script>
</body>
</html>结果：
可以看出，在执行了getClass之后，class属性已经应用上了。这里有两点需要注意的。
1、在methods中使用data时，我加了一个this，这个this其实就是vue实例对象，通过控制台打印我们也看到了。
2、我在class中使用getClass时是加了小括号的，这意味着我们最后获得的是return后的结果，我们以后在绑定事件时，一般是不加小括号的。
2、computed计算属性
1、计算属性在写法上和methods一样
2、计算属性函数其实本质是一个属性对象，当调用属性时，会自动调用属性的get方法
3、平时主要用于数据的转化（例如算总价格，格式化时间）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>总书价：{{ totalPirce }}</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
books: [{
name: "123",
pirce: 111
}, {
name: "123",
pirce: 111
}, {
name: "123",
pirce: 111
}, {
name: "123",
pirce: 111
}]
},
computed: {
totalPirce: function() {
var pirces = 0;
for (var i = 0; i < this.books.length; i++) {
pirces += this.books[i].pirce;
}
return pirces;
}
}
});
</script>
</body>
</html>结果：
计算属性和methods的区别
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{ name }}</div>
<div>{{ name }}</div>
<div>{{ name }}</div>
<div>{{ name }}</div>
<div>{{ getname() }}</div>
<div>{{ getname() }}</div>
<div>{{ getname() }}</div>
<div>{{ getname() }}</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
firstName: "123",
lastName: "456"
},
computed: {
name: function() {
console.log("11111111"); //调用四次只打印了一次111111111，属性不变的时候不会重复执行，直接返回缓存
return this.firstName + " " + this.lastName;
}
},
methods: {
getname: function() {
console.log("2222222"); //打印四次，无缓存，每次调用都要执行
return this.firstName + " " + this.lastName;
}
},
});
</script>
</body>
</html>结果：
可以看出，在平时适合使用计算属性的时候，我们应该优先使用计算属性。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)