关于Vue中计算属性的用法（附代码）

来源：动视网责编：小采时间：2020-11-27 15:24:41

关于Vue中计算属性的用法（附代码）

关于Vue中计算属性的用法（附代码）:这篇文章给大家介绍的内容是关于Vue中计算属性的用法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也可以使用getter，setter方法。使用的话也是非常的简洁明了

推荐度：

点击下载本文 文档为doc格式

导读关于Vue中计算属性的用法（附代码）:这篇文章给大家介绍的内容是关于Vue中计算属性的用法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也可以使用getter，setter方法。使用的话也是非常的简洁明了

这篇文章给大家介绍的内容是关于Vue中计算属性的用法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也可以使用getter，setter方法。使用的话也是非常的简洁明了

这里写个例子

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--<script src="js/vue.min.js"></script>-->
 <script src="vue.min.js"></script>


</head>
<body>
<div id="app">
 总价：{{prices}}
</div>
<script>
 var app=new Vue({
 el:'#app',
 data:{
 package1:[
 {
 name:'iPhone 7',
 price:7199,
 count:2
 },
 {
 name:'iPad',
 price:2888,
 count:1
 }
 ],
 package2:[
 {
 name:'apple',
 price:3,
 count:5
 },
 {
 name:'Banana',
 price:2,
 count:10
 }
 ]},
 computed:{
 prices:function () {
 var prices=0;
 for(var i=0;i<this.package1.length;i++){
 prices+=this.package1[i].price*this.package1[i].count;
 }
 for (var i=0;i<this.package2.length;i++){
 prices+=this.package2[i].price*this.package2[i].count;
 }
 return prices;
 }
 }


 })
</script>
</body>
</html>

在computed属性里面定义一个计算price的方法，然后对data里面的东西进行操作

下面看一下运行结果：

然后再看一下如何使用getter、setter方法：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
 姓名：{{fullname}}
</div>
<script>
 var app=new Vue({
 el:'#app',
 data:{
 firstName:'Jack',
 lastName:'Green'
 },
 computed:{
 fullname:{
 //getter，用于读取
 get:function () {
 return this.firstName+ ' '+this.lastName;
 },
 //setter
 set:function (newValue) {
 var names=newValue.split(' ');
 this.firstName=names[0];
 this.lastName=names[names.length-1];
 }
 }
 }
 })
</script>
</body>
</html>

展现出来的效果是这样的

也是比较简单的用法，在购物模型里面还有金融计算类的应用里面应该用的比较多这个属性

关于Vue中计算属性的用法（附代码）

推荐度：

点击下载本文 文档为doc格式

标签：使用 VUE 代码

热门焦点

关于Vue中计算属性的用法（附代码）

关于Vue中计算属性的用法（附代码）

关于Vue中计算属性的用法（附代码）

最新推荐

猜你喜欢

热门推荐