computed初介绍
在Vue中，computed属性是用来处理数据的计算属性。它是一个函数，返回一个值，这个值会被缓存起来，只有依赖的响应式数据发生变化时才会重新计算。
下面是一个简单的例子，演示了如何使用computed属性来计算一个值：
// Vue实例
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
});
在上面的例子中，我们定义了一个computed属性fullName，它通过拼接firstName和lastName来计算一个完整的名字。这个计算属性会自动跟踪firstName和lastName的变化，只要它们发生变化，fullName就会被重新计算。
在模板中，我们可以直接使用fullName这个计算属性：
<div>{{ fullName }}</div>
当firstName或lastName发生变化时，fullName会自动更新，并且在模板中展示最新的完整名字。
除了基本的计算属性，还可以使用computed属性来实现一些更复杂的计算逻辑。比如，可以通过过滤、映射、聚合等操作对数据进行处理，然后返回新的计算属性。
下面是一个更复杂的例子，演示如何使用computed属性来计算一个列表中的偶数元素的和：
// Vue实例
new Vue({
data: {
numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
computed: {
evenSum: function() {
return this.numbers.filter(function(number) {
return number % 2 === 0;
}).reduce(function(sum, number) {
return sum + number;
}, 0);
}
}
});
在上面的例子中，我们定义了一个computed属性evenSum，它通过过滤出偶数元素，并对它们进行求和来计算一个新的值。这个计算属性会自动跟踪numbers的变化，只要它发生变化，evenSum就会被重新计算。
在模板中，我们可以直接使用evenSum这个计算属性：
<div>{{ evenSum }}</div>
当numbers发生变化时，evenSum会自动更新，并且在模板中展示最新的偶数元素的和。
需要注意的是，computed属性是通过缓存机制来提高性能的。当computed属性依赖的响应式数据发生变化时，只有相关的computed属性会被重新计算，而不是每次都重新计算所有的computed属性。这样可以避免不必要的计算，提高页面性能。
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>
#app button{
margin: 10px;
display:block ;
}
</style>
</head>
<body>
<div id="app">
<table border="1" width="500px">
<tr>
<th>物品</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr v-for="item in list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{item.price*item.num}}</td>
</tr>
<tr>
<td colspan="3">合计</td>
<td>{{sigletotal}}</td>
</tr>
</table>
<form >
<label for="">物品</label>
<input type="text" v-model="name" >
<label for="">价格</label>
<input type="text" v-model="price">
<label for="">数量</label>
<input type="text" v-model="num">
</form>
<button @click="add">添加</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'',
price:'',
num:'',
list:[
{name:'苹果',price:2,num:3},
{name:'西瓜',price:4,num:5},
{name:'菠萝',price:4,num:6},
{name:'香蕉',price:1,num:2}
]
},
methods:{
add(){
if(this.name==''||this.price==''||this.num==''){
alert('请输入完整信息')
return
}else if(isNaN(this.price)||isNaN(this.num)){
alert('价格和数量必须为数字')
return
}else if(this.price<0||this.num<0){
alert('价格和数量不能为负数')
return
}else if(this.price==0||this.num==0){
alert('价格和数量不能为0')
return
}else{
this.list.push({
name:this.name,
price:this.price,
num:this.num
})
this.name=''
this.price=''
this.num=''
}
}
},
computed:{
sigletotal(){
let total=0;
for(let i=0;i<this.list.length;i++){
total+=this.list[i].price*this.list[i].num
}
return total
}
}
})
</script>
</body>
</html>HTML结构
- DOCTYPE: 定义了文档类型为HTML5。
<html>: 根元素，设置了语言为英语。<head>: 包含文档的元数据。- 字符集:
UTF-8确保正确显示字符。 - 视口设置: 使得页面在不同设备上能适当缩放。
- 标题: 简单的文档标题。
- 内联样式: 定义了按钮的样式，包括边距和块级展示。
- 字符集:
<body>: 页面主体内容。<div id="app">: Vue实例挂载的元素，包含表格和表单。- 表格: 展示商品列表和总计。
- 表头: 列出物品、价格、数量、总价。
- 商品行: 使用
v-for指令动态渲染商品列表。 - 总计行: 显示所有商品的总价，值由计算属性
sigletotal提供。
- 表单: 添加新商品的输入框和提交按钮。
- 输入框使用
v-model双向绑定数据。 - 添加按钮: 点击触发
add方法。
- 输入框使用
- 表格: 展示商品列表和总计。
JavaScript (Vue实例)
- Vue库引入: 通过CDN加载Vue.js。
- Vue实例: 创建并挂载到ID为
app的元素上。data: 定义应用状态数据，包括输入框绑定的值和商品列表。methods:add: 添加新商品的逻辑。验证输入是否合法，然后将新商品推入list数组，并清空输入框。
computed:sigletotal: 计算属性，循环遍历list计算所有商品的总价。
此代码展示了Vue的基本用法，包括数据绑定、列表渲染、事件处理、计算属性和条件验证。用户可以通过表单输入信息，点击添加按钮将新商品加入到表格中，并自动计算所有商品的总价格。