① 在Vue实例中有两个名字字符串如下,请定义一个计算属性fullname,将两个名字和为一个全名,中间加”˙”,如“马克˙吐温”,并输出全名 ② vue实例中有一个存放商品信息的数组,用v-for结合表格显示,并定义一个计算属性,计算商品的总价
时间: 2024-12-10 15:55:21 浏览: 12
在Vue中,你可以这样定义:
1. **计算属性fullname**:
```javascript
<template>
<div>
<h1>{{ fullname }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
firstName: '马克',
lastName: '吐温'
};
},
computed: {
fullname() {
return this.firstName + '˙' + this.lastName;
}
}
};
</script>
```
在这个例子中,`fullname`是一个计算属性,它会在数据`firstName`和`lastName`变化时自动更新。
2. **V-for显示商品信息及计算总价**:
```html
<table>
<tr v-for="item in products" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
</tr>
</table>
<script>
export default {
data() {
return {
products: [
{ id: 1, name: '商品A', price: 100 },
{ id: 2, name: '商品B', price: 200 },
// 更多商品...
]
};
},
computed: {
totalPrice() {
return this.products.reduce((total, product) => total + product.price, 0);
}
}
};
</script>
```
`totalPrice`是另一个计算属性,通过`reduce()`函数遍历商品数组,累加每个商品的价格得到总价格。每次`products`数组变化时,总价会自动更新。
阅读全文