【Vue】如何巧妙使用computed
前言:watch是个很实用的属性。不但可以用来监听form标签值的变化,还可以用来监听对象属性的变化。一、案例一<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>...
·
前言:watch是个很实用的属性。不但可以用来监听form标签值的变化,还可以用来监听对象属性的变化。
一、案例一
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="content" >
<div>
是否已经全选
<span v-if="isAllCheck" style="color:red;">是</span>
<span v-else>否</span>
</div>
<div v-for="item in dataList">
<input type="checkbox" v-model="item.isCheck"/>{{item.name}}
<div>
</div>
<script>
new Vue({
el:'#content',
data: {
dataList:[
{isCheck:false, name:'选项一'},
{isCheck:false, name:'选项二'},
{isCheck:false, name:'选项三'},
],
},
computed:{
isAllCheck: function(){
const dataList = this.dataList;
for(var item of dataList){
//如果item中存在isCheck为false的直接return false;
if(!item.isCheck) return false;
}
return true;
}
}
});
</script>
</body>
</html>
运行结果
二、案例二
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<style>
table { width:100%; }
td { text-align:center; }
input { width:50px; text-align:center; }
span { color:red; }
.total { margin-top:50px; text-align:center; }
</style>
</head>
<body>
<div id="content" >
<table>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
<tr v-for="(item,index) in dataList">
<td>{{item.name}}</td>
<td>¥{{item.price}}</td>
<td>
<button @click="minus(index)">-</button>
<input type="text" v-model="item.num">
<button @click="add(index)">+</button>
</td>
<td>¥{{item.price*item.num}}</td>
</tr>
</table>
<div class="total">总金额为<span>¥{{ totalPrice }}</span></div>
</div>
<script>
new Vue({
el:'#content',
data: {
dataList:[
{name:'商品一', price:10, num:0},
{name:'商品二', price:20, num:0},
{name:'商品三', price:30, num:0},
],
},
computed:{
totalPrice: function(){
let dataList = this.dataList,
totalPrice = 0;
for(let item of dataList){
if(item.num > 0){
totalPrice += item.price * item.num;
}
}
return totalPrice;
}
},
methods:{
add: function(index){
this.dataList[index].num++;
},
minus: function(index){
if(this.dataList[index].num>0){
this.dataList[index].num--;
}
}
}
});
</script>
</body>
</html>
运行结果
三、将案例一跟案例二合并
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<style>
table { width:100%; }
td { text-align:center; }
td:first-child,th:first-child { text-align:left; }
input { width:50px; text-align:center; }
span { color:red; }
.total { margin-top:50px; text-align:center; }
</style>
</head>
<body>
<div id="content" >
<table>
<tr>
<th><input type="checkbox" v-model="isAllCheck" @click="changeAllCheck">全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
<tr v-for="(item,index) in dataList">
<td><input type="checkbox" v-model="item.isCheck"></td>
<td>{{item.name}}</td>
<td>¥{{item.price}}</td>
<td>
<button @click="minus(index)">-</button>
<input type="text" v-model="item.num">
<button @click="add(index)">+</button>
</td>
<td>¥{{item.price*item.num}}</td>
</tr>
</table>
<div class="total">总金额为<span>¥{{ totalPrice }}</span></div>
</div>
<script>
new Vue({
el:'#content',
data: {
dataList:[
{isCheck:false, name:'商品一', price:10, num:1},
{isCheck:false, name:'商品二', price:20, num:1},
{isCheck:false, name:'商品三', price:30, num:1},
],
},
computed:{
totalPrice: function(){
let dataList = this.dataList,
totalPrice = 0;
for(let item of dataList){
if(item.isCheck && item.num > 0){
totalPrice += item.price * item.num;
}
}
return totalPrice;
},
isAllCheck:function(){
let dataList = this.dataList;
for(let item of dataList){
if(!item.isCheck){ //如果isCheck存在false的,直接返回false
return false
}
}
return true;
}
},
methods:{
add: function(index){
this.dataList[index].num++;
},
minus: function(index){
if(this.dataList[index].num>0){
this.dataList[index].num--;
}
},
changeAllCheck: function(){
let dataList = this.dataList;
let bool = this.isAllCheck = !this.isAllCheck;
for(let item of dataList){
item.isCheck = bool;
}
}
}
});
</script>
</body>
</html>
运行结果
更多推荐
已为社区贡献5条内容
所有评论(0)